Question

I want to have a button with a gradient and an icon expressing the functional purpose of the button. Is this approach an adequate compromise of using HTML to achieve this requirement? Or is this bad misuse of HTML?

The decorator takes care of the button look and the icon selector displays the save icon.

span.button.decorator {
   background-image:url("gradient.png");
   background-repeat:repeat-x;
}

span.button.decorator input.icon {
    background-image:url("icon-sprite.png");
}

span.button.decorator input.icon_save {
    background-position: 0 1500px;
}

The CSS directives enhances the button with a gradient effect and also take care of the button icon.

<span class="button decorator">
   <input type="button" value="Save" class="icon icon_save" />
</span>

Are there better solutions? Thank you.

---

Learned about <button /> today. For further informations have a look into the stackoverflow question HTML - <button> vs. <input type="button" />.

Answer 1

I’d use this as a starting point myself:

<button>
   <img alt="Save" src="save.png" />
</button>