squarehappy is Michael Huch is a cynical web developer and designer with more styles than content.

Styling an RSS Link

posted by Mike on 07.01.2005 05:25 AM EST | 453 comments

When RSS was young all we had was this plain orange button to signify the link to the site's RSS feed. Everyone used this button because they assumed they had to. Failure to comply would be met with swift justice from the internet police. This button was obnoxious and the graphic designers being perfectionist control freaks finally stood up and boldly stated "It's all I can stands and I can stands no more!"

So this guy whose name and site escape me comes up with a new design that's a bit sleeker and most importantly not obnoxious like its predecessor. I tried searching for the source but a query of "rss image link creator" and the like weren't quite specific enough it seems. If you can think of better search terms or actually know the source then please let me know so I can include some real live facts in this article. Some examples as follows:

I somehow managed to make them as awkward and dorky looking as humanly possible. Here we have the original format and the latter its evolved form, featuring a protective padding. Now what I plan to do here today is recreate this style using nothing but an <a> element and CSS. We may throw some structural markup in there just to mix it up, but I can't put my name behind that. Use at your own risk.

IMPLEMENTATION

Firstly and foremost, the markup:

<a id="rss" href="rss.xml">RSS</a>

And now for the CSS:

a#rss, a#rss:after {
	background-color: #ff6600;
	font-family: Verdana;
	font-size: 8px;
	text-decoration: none;
	color: #fff;
	padding: 1px 0 1px 4px;
	border: 1px solid #000;
}

a#rss:after {
	content: "GET THE RSS FEED";
	background-color: #fff;
	color: #000;
	padding-right: 4px;
	margin-left: 4px;
	border-right: none;
}

So you're looking at the :after pseudo-class now and thinking, "Great, this is worthless to 90% of my audience." And you'd be right, but that's not why I'm typing this right now. I'm dealing in theoretical CSS that may someday have real world applications. But being a geek I must conceive it for the sake of its conception. That said, Internet Explorer users are out of luck. They will get a simple orange box that you'll have to admit is still less annoying than the original.

So now to test your browser's ability to handle the above CSS. Hold on to your desk.

RSS

Note that the entire button is clickable, much like if it were an actual image. As far as padding goes, there isn't any way to add it to the button without a wrapper <span> or <div>. That's just my way of cutting this article nice and short. Read on for my earlier attempts to create the button with some rendering oddities you may want to take note of for whenever :after becomes relevant.

FAILED ATTEMPTS

My initial attempt at styling the RSS link began with this CSS:

a#rss_failed, a#rss_failed:after {
	background-color: #ff6600;
	font-family: Verdana;
	font-size: 8px;
	text-decoration: none;
	color: #fff;
	padding: 1px 4px;
	border: 1px solid #000;
}

a#rss_failed:after {
	content: "GET THE RSS FEED";
	background-color: #fff;
	color: #000;
	border-left: none;
}

If you knew how that was gonna turn out without looking below, congratulations. I didn't. That was the point of this exercise. The result of the above CSS is the link below:

RSS

I hadn't anticipated that the contents of :after would fall within a#rss's box. And though both a#rss and a#rss:after were assigned top and bottom borders, they collapse in both Firefox and Opera. In my head I pictured :after falling inline after the box, and it clearly didn't work out like that at all. It was time to hack away.