Drew's Blog

The Joys of Technology Explored

Doing Away With Button Images Thanks to CSS

Dylan Greene did the button in CSS , which is precisely as politically correct as the PNG version. [Scripting News]

This is great! Surprised no one thought of this sooner. 

In fact, here's a translation of the instance CSS to a class so that you can stuff it in a stylesheet and reuse it for all types of buttons in your page:

a.standardsButton
{
    border:1px solid;
    border-color:#ffc8a4 #7d3302 #3f1a01 #ff9a57;
    padding:0px 3px 0px 3px;
    font:bold 10px verdana,sans-serif;
    color:#FFFFFF; background-color:#ff6600;
    text-decoration:none;
    margin:0px;
}

Then, you can use something like so:

<a class="standardsButton" href="http://www.xmlrpc.com">XML-RPC</a>
Posted: Feb 25 2003, 06:48 PM by drub0y | with 2 comment(s)
Filed under:

Comments

Elizabeth P said:

Great idea. Thanks. I did some experiments with your script and evrything looks fine. I will get rid of all those clumpy and nasty icons on "www.pawlakpatent.com" and surely use on www.secretjustice.org which is now "under complete re-construction".
Elizabeth
# February 5, 2004 9:31 PM

TrackBack said:

I've added some new RSS feeds.
# February 23, 2004 10:01 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)