Below are a few styles I created to mimic those XML and RDF buttons found on a lot of sites. Since the icon is so simple, there’s not really any reason to use a GIF instead of CSS. The number of bytes transferred is basically the same, but you do save one server connection. (text-shadow only works in Safari so far as I know, it’s ignored everywhere else but nice if you have it.)
.xml_link, .rdf_link {
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 11px;
text-decoration: none;
padding: 0 5px 1px 5px;
color: white;
border: 1px solid #555;
}
.xml_link
{
background: #ff6600;
border-color: #ffc8a4 #7d3302 #3f1a01 #ff9a57;
text-shadow: 2px 2px 0px #c25004;
}
.rdf_link
{
background: #0000ff;
border-color: #7b7bff #00005d #00005d #7b7bff;
text-shadow: 2px 2px 0px #000099;
}
.xml_link:hover {border-color: #ee5500 #000 #000 #ee5500;
text-shadow: 2px 2px 0px #7d3302;
}
.rdf_link:hover {border-color: #0000cc #000 #000 #0000cc;
text-shadow: 2px 2px 0px #00005d;
}
| XML | RDF |
 |
 |
Those pretty much matched the most common graphics I found, but I thought they were a big chunky, and I couldn’t convince the height to scrunch down to 14px while remaining an inline element. So changed the font-size to ‘9px’ and the padding to ‘0 3px;’ which creates these smaller stylings:
Of course, I don’t have a feed yet, but a lot of other people do.
These are free to use. (as if…)
Update:There are a bunch of these floating around online, here are some others:
Ah well, I only wasted about 10 minutes re-inventing the wheel this time. I’ve done far worse than that.
