CSS-only RSS badge

Wednesday 5 October 2005

Sometimes I get stuck obsessing about tiny details. Recently I decided to give my RSS link a standard orange badge. But instead of using an image, I did it with CSS. I'd seen it done before, but I couldn't find the example I'd seen, so I cobbled it together from some other bits and pieces:

RSS

The final code is:

<a
    href='blog/rss.xml'
    type='application/rss+xml'
    style='
        padding: 0 .4em;
        background: #F60;
        color: white;
        border: 1px solid;
        border-color: #FC9 #630 #330 #F96;
        font-weight: bold;
        text-decoration: none;
        '
    >RSS</a>
tagged: » 5 reactions

Comments

[gravatar]
markp 8:32 PM on 5 Oct 2005

v nice... Dave Winer would be proud :)

[gravatar]
Bob 8:40 PM on 5 Oct 2005

It even renders properly in Blazer on my Treo 650.

[gravatar]
Gustaf Erikson 3:00 AM on 6 Oct 2005

nice work fixing that by yourself, I had to crib it:

http://gustaf.symbiandiaries.com/weblog/scrivener/Ugly-XML.html

[gravatar]
Leonard Richardson 4:20 PM on 6 Oct 2005

You might have seen it on my web page (where there's now just a text link), or on a NewsBruiser site. I stole the idea from Nick Moffitt.

[gravatar]
Ned Batchelder 4:00 PM on 7 Oct 2005

Yeah, it's pretty lame that I'm only getting to it now, and can't even properly credit the bright guys I stole it from! Leonard, you are probably right about it being crummy.com.

Add a comment:

name
email
Ignore this:
not displayed and no spam.
Leave this empty:
www
 not searched.
 
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.