CSS MyYahoo, Bloglines, Feedster [...] Syndication Buttons

"Add to My" syndication buttons

With the recent RSS / Web 2.0 craze, you'll no doubt be familiar with these type buttons:

The Problem: Too Many Images

An issue with having these numerous syndication buttons on your pages, is once you multiply those six or so images by every page hit, over the life-time of a site, it could add up significantly in terms of negating server performance, bandwidth cost, and user waiting times.

The Solution: Pure CSS Styled Buttons

The solution is pure CSS fashioned buttons, using semantic markup, with absolutely no images. All whilst still maintaining the general look and feel of the originals

In case the benefits of this aren't clear so far, here's a few noteworthy points:

Less bandwidth use - faster load times, help stay under bandwidth quotas
Less HTTP requests - less strain on your server means it will perform more reliably, and act more responsive
More accessible - buttons are resizable, will render with images disabled, and in screen readers

The CSS Buttons

You'll notice they don't look identical to the source material, and depending on your browser and OS font anti-aliasing algorithm, they may look visually better, worse, or indifferent. The important thing, is they do have enough of their original branding to be quickly recognisable.

The Source Code

The source code which you are free to modify to your needs, and re-use on your own site:

Source CSS

/* subscribe buttons */
.subscribe
{
	font-size: small !important;
	font: bold x-small/1em arial,verdana,sans-serif;
	padding: 0;
	margin: 1px 0 0 1px;
	list-style: none;
}
.subscribe li
{
	border-right: #636563 solid 1px;
	border-bottom: #636563 solid 1px;
	padding: 0;
	margin: 1px 0 .5em 1px;
}
.subscribe li a
{
	display: block;
	border: 1px #ccc solid;
	text-decoration: none;
	margin-top: -1px;		
	margin-left: -1px;
	padding: 1px;
}
.subscribe li a strong
{
	color: #fff;
	background: #18659c;
 	width: 1em;
	text-align: center;
	float: left;
	margin-right: .3em;
}
/* my msn */
.subscribe li.mymsn a
{
	color: #397da5;
	text-transform: uppercase;
}
/* my yahoo */
.subscribe li.myyahoo a
{
	color: #000;
}
.subscribe li.myyahoo a strong
{
	background: #0034ce;
}
.subscribe li.myyahoo a em
{
	font-variant: small-caps;	
	font-style: normal;
	color: #ff1821;
}
/* feedster */
.subscribe li.feedster a
{
	color: #4292b5;
	letter-spacing: 0.2em;
	font-style: normal;
}
.subscribe li.feedster a strong
{
	background: #006994;
	letter-spacing: 0px;
}
/* bloglines */
.subscribe li.bloglines a strong
{
	background: #6386d6;
	font-family: arial,verdana,sans-serif;
}
.subscribe li.bloglines a
{
	font-weight: normal;
	font-family: courier,monospace;
	color: #186d94;
}
/* newsgator */
.subscribe li.newsgator a
{
	color: #bdbabd;
	text-transform: lowercase;
}
.subscribe li.newsgator a strong
{
	background: #31864a;
}
.subscribe li.newsgator a em
{
	color: #94b27b;
	font-style: normal;
}
/* pluck */
.subscribe li.pluck a strong
{
	background: #008ace;
	font-weight: bold;
}
.subscribe li.pluck a
{
	font-weight: 900;
	color: #000;
}

Source Markup

<ul class="subscribe">
	<li class="myyahoo"><a href="#"><strong>+</strong> My <em>Yahoo!</em></a></li>
	<li class="feedster"><a href="#"><strong>+</strong> Feedster</a></li>
	<li class="mymsn"><a href="#"><strong>+</strong> My MSN</a></li>
	<li class="newsgator"><a href="#"><strong>+</strong> News<em>Gator</em></a></li>
	<li class="bloglines"><a href="#"><strong>+</strong> Bloglines</a></li>
	<li class="pluck"><a href="#"><strong>+</strong> Pluck</a></li>
</ul>

Browser Compatiably

The buttons have been tested in Firefox 1.0.7, and IE 6.0. They use relatively run-of-the-mill CSS, so there's no reason to believe they should render grotesquely in any standards-compliant modern browser (but please let me know if they do).

CSS / XHTML RSS