October
2006
Bulletproof buttons
Quite a while ago now in fact I was working on some sexy CSS buttons. Not only did I want them to look good, I also wanted them to be bulletproof, elegant and technically simple but visually complex, with minimal image usage all at the same time.
Why are these buttons bulletproof? The actual dimensions are set to grow and shrink based on text size and the images are placed using spans, so that the icons can be themed. There is not one single img tag to be seen, it relies on background images, which right now can’t be scaled because CSS doesn’t yet support background image scaling. The button can still be readable without any images being present, because the text, is erm, well it’s text and so aids speech readers and search engines. Why create buttons out of images and place the text in the image? Surely only a webmaster with limted time would hard code the text inside the image in photoshop (please ignore my site header).
See the buttons in action on this page.
All code contained within the example page
Aside from all the niceness I wanted to allow a server side team to easily include the CSS and related HTML and change the orientation of these buttons based on selecting a class name. I chose to use unordered lists so that without CSS the links, which is essentailly what the buttons are, would still function. Plus of course the UL structure allows me to change the orientation of the buttons in CSS, by stating “display : inline”, or “display : block;”.
The main aim I had in mind was trying to visually tell the user when they had already clicked on one of these buttons and I did this using the pseudo class “:visited” on the a selector, to choose a different icon, of course this works in IE6 too because the a selector is the only thing IE6 supports this technique on. Beautiful code, well tested, well conceived, using bulletproofing to ensure the elements look right in any circumstance and the design isn’t too bad either, who said these had to be square, they could be splodges of paint on a childs painting game.
