I wanted to improve the buttons on the forms we use in web applications I was working on. Improvements I would like to make:
- Adding accesskeys, which I would like to be underlined in the button.
- visually differentiate specific buttons by adding an icons and changing the color.
The best way you can do this is by using the button element. This method has several advantages:
button elements can contain HTML.
button elements can be styled on Safari.
- Your form will remain accessible.
Here is an example of HTML you could use:
<button accesskey="d" class="delete" type="button">
<span class="icon"> </span><em>D</em>elete
</button>
I use the button for a default button background image and the span for an icon. Here is an example of CSS you could use:
button {
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
background: url("button.jpg");
border: 0;
}
button:hover {
background: 0 -25px url("button.jpg");
}
button em {
font-style: normal;
text-decoration: underline;
}
.delete .icon {
padding-left: 14px;
line-height: 25px;
background: url("del_icon.gif") no-repeat 0 50%;
}