March 20, 2004

CSS Buttons

Posted by shonk at 11:47 PM in Blogging | TrackBack

I’ve spent entirely too much time over the last two days making the buttons for my RSS feeds, GeoURL and W3C validation that are now visible to the left and right (at least if you’re viewing this post on the main page). I think they’ve turned out pretty well, considering that they’re pure CSS buttons. Props to Mike Golding for the original inspiration, kryogenix for the basic implementation (link courtesy Jesse Lawrence) and Chris Pirillo for a nifty trick that made the CSS less overwhelming. Hopefully my blatant theft of their designs won’t get me in trouble. These examples are scaled up a bit because the text in my center column is larger than the text in my side columns:

Anyway, here’s the basic CSS that I used:

 .sidebutton {
 border: 1px solid #333;
 margin: 2px 0 0 3px;
 width:10.0em;
 margin: 0 0 3px 10px;padding: 0;
 font-family: verdana, arial, sans-serif;
 font-size: 1.0em;
 }
 
 .sidebutton a:link, .sidebutton a:visited, .sidebutton a:active {
 display: block;
  text-decoration: none;
 color: #fff;
 border: 1px solid white;
 }
 
 
.sidebutton strong {
 font-weight: normal;
 padding: 1px 3px 1px 3px;
}

.sidebutton em {
 font-style: normal;
 font-weight: normal;
 padding: 2px 0px 2px 0px; color: #fff;
 }

 .rssbutton { background: #999;}
 .rssbutton strong { background:#f60; }
 .rssbutton em { color: white; }
 .rssbutton a:hover { background: #000; }

 .geobutton { background: #999; }
 .geobutton strong { background:#093; font-weight:bold; font-style:italic;}
 .geobutton em { color: white; }

 .w3cbutton { background: #fc6; }
 .w3cbutton strong { background: #fff; color: #069; }
 .w3cbutton em { color: black !important; }

From there, it’s simply a matter of inserting the appropriate HTML into the main index. This is the code for my RSS 1.0 Full Text button:

<div class="sidebutton rssbutton">
<a
href="http://www.sellingwaves.com/index.rdf" title="RSS 1.0 full-text syndication">
<strong>RSS</strong>
<em>1.0 Full Text</em></a> </div>

For the GeoURL button, I use class="sidebutton geobutton" and for the W3C button I use class="sidebutton w3cbutton" (and, obviously, modify the text appropriately). And that’s it. Lots of trial-and-error on the front end, but now any new buttons I want to make are a snap (at most I might have to make a new CSS sub-class, but, on the plus side, I won’t need to link to an external image or worry about making one if it doesn’t exist yet).

Now, let’s all hope I recover my sanity before I have to do some actual work tomorrow.

Comments

you are a css god

Posted by: John T. Kennedy at March 21, 2004 12:38 AM

Sarcasm?

Posted by: shonk at March 21, 2004 12:56 AM

Just in a good mood.

Posted by: John T. Kennedy at March 21, 2004 01:44 AM

Sorry, your site does not currently validate as XHTML.

Posted by: SniperX at November 8, 2004 08:09 PM

Sorry, your site does not currently validate as XHTML.

This page does now, as should most of the other pages around here. If you find another that doesn't, please let me know and I'll try to fix it.

Posted by: shonk at November 8, 2004 08:50 PM