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:
buttonelements can contain HTML.buttonelements 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%;
}
Posts
2 comments:
Very nice... I tried it in Opera 8.0, and noticed that the button:hover style, would "lose" the pointer cursor. (it flashes on for a millisecond, then disapears...
I would expect the cursor, to "cascade", as it does in Firefox, and even the blue e.
Cheers,
Steve
Adding to my last comment, the 'flash' is from it working on the button, but not on the sub-nodes...
If "cursor:pointer;" is added to the "button em" and ".delete .icon" CSS info (redundant, I know, but...) it works in Opera too.
Cheers,
Steve
Post a Comment