Friday, November 19, 2004

Replacing Graphics With CSS

This is so cool.

You, of course, are familiar with this button:


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=""
style="border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px verdana,sans-serif;

Thanks to this page for that nifty trick.