Is it acceptable to use HTML to create a button with a gradient background and an icon that represents its function? Or is this considered misuse of HTML?
The decorator is responsible for the button's appearance, while the icon selector determines which icon to display.
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 rules add a gradient effect to the button and manage the button's icon.
<span class="button decorator">
<input type="button" value="Save" class="icon icon_save" />
</span>
Are there alternative solutions to achieve this? Thank you.
Today I learned about using <button />. For more information, refer to the discussion on stackoverflow at
HTML - <button> vs. <input type="button" />