Surf 11 » The CSS XML / RSS Button

Finding the best waves on the web.

You can make one of those orange XML or RSS buttons or icons without using an image with CSS. Here's how:

CSS:

.feed {
border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:4px;
}

HTML:

<a href="/rss/" class="feed">FEED</a>

Example:

FEED



Related Entries
On 01/02/2013 at 12:00:00 AM UTC devilsoulblack wrote:
1
nice :)

On 01/02/2013 at 12:00:00 AM UTC uh do'h wrote:
2
You forgot to include the hover .feed:hover{

}

On 01/02/2013 at 12:00:00 AM UTC antonio wrote:
3
a.feed:link, a.feed:active{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFFFF; background: #F60; text-decoration: none; margin: 2px; }

a.feed:hover, a.feed:active{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFF00; background: #F60; text-decoration: none; margin: 2px; }

On 01/02/2013 at 12:00:00 AM UTC Dan wrote:
4
a.feed:link, a.feed:active, a.feed:visited{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFFFF; background: #F60; text-decoration: none; margin: 2px; } Antonio - good improvements, but you must also include the 'visited' pseudo-property to truly get the correct result.

I found that without this, the button kept defaulting to my main link style on my page instead of the RSS-button link style.

a.feed:hover, a.feed:active{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFFFF; background: #F60; text-decoration: none; margin: 2px; }

On 01/02/2013 at 12:00:00 AM UTC Dan wrote:
5
(EDITED TO CORRECT MIS-PASTING)

Antonio - good improvements, but you must also include the 'visited' pseudo-property to truly get the correct result.

I found that without this, the button kept defaulting to my main link style on my page instead of the RSS-button link style.

a.feed:hover, a.feed:active{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFFFF; background: #F60; text-decoration: none; margin: 2px; }

On 01/02/2013 at 12:00:00 AM UTC Dan wrote:
6
(EDITED AGAIN TO CORRECT MORE MIS-PASTING!!!! SORRY!!!)

Antonio - good improvements, but you must also include the 'visited' pseudo-property to truly get the correct result.

I found that without this, the button kept defaulting to my main link style on my page instead of the RSS-button link style.

a.feed:hover, a.feed:active, a.feed:visited{ border: 1px solid; border-color: #FC9 #630 #330 #F96; padding: 0px 3px 0px 3px; font: bold 10px verdana, sans-serif; color: #FFFFFF; background: #F60; text-decoration: none; margin: 2px; }

On 01/02/2013 at 12:00:00 AM UTC funwithpi wrote:
7
a:focus {outline: none;}

to get rid of dotted outline in firefox, flock, etc.

Name:

Email: (optional, not displayed on site)
   Subscribe to this thread
Comments: (html will be escaped)



Subscribe to our RSS Feed: subscribe to this feed XML
Archives   Tags   Contact