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>

Comments

[gravatar]

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

[gravatar]

It even renders properly in Blazer on my Treo 650.

[gravatar]

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]

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:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.