CSS3-only Buttons Library


This is a little library to create nice buttons for modern browsers in a faster way. No license attached, use for whatever you like. Thanks!

View the demo Download

How It Works

The library works by using custom defined classes on your HTML elements. For this classes to work link the buttons.css file from the head of your HTML document.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Your Website</title>
<!-- Buttons Library CSS -->
<link rel="stylesheet" media="all" href="buttons.css"/>
</head>

To apply a button style to any element, add a .button class with one of the desired colors. The 21 available colors are detailed in the following section ( you can remove and add more easily ).

<a class="button pink" href="#">
Im an anchor
</a>
<button class="button graphite">
Im a button element
</button>
<div class="button red">
Im a div!
</div>
<p class="button orange">
hmmm and i'm a p
</p>

Adding More Colors

Its quite easy, just copy-paste one of the predefined CSS button colors and change the hexadecimal value of the background color. You only need to provide one color, the rest of the class will automatically create the gradients for the different states by using box-shadow and css3 gradients. For example you can copy the following CSS and replace the #c4c4c4 with any color you like. Make sure to rename the copied classes to match your new color.

/* SILVER */
.button.silver {
background: #c4c4c4;
background: #c4c4c4 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}
.button.silver:hover {
background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}
.button.silver:active {
background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

Browser Support

So far, it only works on Safari, Chrome and Firefox. It has a decent degradation on Opera but not so much on IE. Hopefully this will change in the near future with IE9. Thanks for reading!

Reactions (8)

  1. Tiago César Oliveira

    Really cool, thanks for sharing!

    Muito legal, obrigado por compartilhar!

  2. I’m sad to report that a casual test of this page on IE9 doesn’t render the buttons in their desired Chrome/Firefox layout. It looks closer to Opera’s rendition, however the rounded corners have a black instead of transparent background. There is also no drop-shadow on the text in IE9. Oh well.

  3. Pingback CSS3 Imageless Buttons Library | Bookmarks by aldolat

  4. Trevor

    Just wanted to say thanks, these are gorgeous. Really appreciate your hard work.

  5. Pingback Segnalibri al 27 aprile 2011 | Ubuntu block notes