Friday, November 19, 2004

Replacing Graphics With CSS

This is so cool.

You, of course, are familiar with this button:

XML

and its variants (RSS, Atom, etc.). This popular orange button is the most popular way of knowing that a particular page has an XML feed. Now, try doing this: right-click on that button and choose properties. See anything weird? Yep, that button isn't graphics; it's just plain text!

See, instead of creating the usual GIF or PNG button, I simply used CSS to put a border around the text "XML" and just filled it with an orange background color. Here's the actual code:


<a title="RSS 2.0" href="http://hackmybrain.blogspot.com/atom.xml"
style="border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px verdana,sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;">XML</a>


Thanks to this page for that nifty trick.