Full CSS buttons (with mouse overs)

Provides accessible links too Lots of thanks to Petr Stanicek (a.k.a. “Pixy”) who devised the original tecnique for headers on which this idea is based
There a few ways of creating 'buttons' on sites that fit within the style of your site. From just using an image link to applying graphics to 'form' buttons. This method is both quite simple, and code lite, along with the bonus of keeping the link accessible by the both screen-readers and search-engine 'bots'. example below

HTML

<span class="examplebutton">
<a class="button" title="pure CSS button" href="#"><span>&nbsp;</span>Go</a>
</span>

CSS

.examplebutton a.button {
float: left;
width: 33px;
height: 25px;
background: url(butn-go.gif) no-repeat top;
cursor: pointer;
overflow:hidden;
}
.examplebutton a.button span {
display: block;
width: 33px;
height: 25px;
}
.examplebutton a.button:link, .examplebutton a.button:active, .examplebutton a.button:visited {
width: 33px;
height: 25px;
display: block;
text-decoration: none;
}
.examplebutton a.button:hover span {
width: 33px;
height: 25px;
display: block;
text-decoration: none;
background: url(butn-go-hov.gif) no-repeat top;
}

Expatiation

What we have is a an '<a>' tag with class (so it can be targeted from the CSS) in which is contained the text thats relevent (this is why it's more accessable than a regular image within a <a href> without the CSS or the image it's just a regular text link) and a <span> containing a non breaking space, the non breaking space gives the hover something to 'hold' on to. What hapens is the fixed size of the <a> stops whatever text the button requires spilling out and taking up too much browser space. This lets the span, with it's display:block take up all the <a> tags space, placing the button image as a background then covers over the remaning visible text in the <a> tag. In all the sudo classes (:hover, :active, :visited & :link) text decoration: none is added to keep the underline off the non breaking space, keeping it invisible. The final part is to add a 'mouseover' state, this is done by using the :hover sudo class adding the <span>, this places the mouseover on top of the existing button image, instead of replacing it. So reducing the likelyhood of thet ugly flicker that sometimes happens in IE when loading a background image on a :hover state.

Hopefully these buttons should be of use to someone. My next post should be an example of highly portable 100% CSS forms. These are a mixture of a few CSS form methods that are flexable enough to use in multiple sites with fairly small changes to the HTML & CSS, thay are also WC3 compliant.