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 {<br />
font-family: verdana, sans-serif;<br />
font-weight: bold;<br />
font-size: 11px;<br />
text-decoration: none;<br />
padding: 0 5px 1px 5px;<br />
color: white;<br />
border: 1px solid #555;<br />
}<br />
.xml_link<br />
{<br />
background: #ff6600;<br />
border-color: #ffc8a4 #7d3302 #3f1a01 #ff9a57;<br />
text-shadow: 2px 2px 0px #c25004;<br />
}<br />
.rdf_link<br />
{<br />
background: #0000ff;<br />
border-color: #7b7bff #00005d #00005d #7b7bff;<br />
text-shadow: 2px 2px 0px #000099;<br />
}<br />
.xml_link:hover {border-color: #ee5500 #000 #000 #ee5500;<br />
text-shadow: 2px 2px 0px #7d3302;<br />
}<br />
.rdf_link:hover {border-color: #0000cc #000 #000 #0000cc;<br />
text-shadow: 2px 2px 0px #00005d;<br />
}<br />
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:
XML RDF
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.