Use your left/right keys to browse tutorials
Pretty CSS3 buttons

Pretty CSS3 buttons

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 28, 2010

I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.

The Objective

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.

The button style

This is the default class that is applied to each button on our page. We can customise a button is by adding a chain of CSS classes, this way we can set the colour and size. You’ll see below that we have an overlay.png background image. This gives us the gradient effect if your still conscious about IE6 you’ll need to use a PNG transparency hack to make 24 bit PNG’s render correctly.

Another feature with CSS3 is RGBA, This is the same as RGB but with an alpha layer allowing you to set the opacity of a colour. This allows us to easily change the background of our buttons containing div without us having to adjust the buttons style

.button, .button:visited {
	background: #222 url(overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer

In the image below you can see that the background colour is different but the shadow around the edge of the button remains the same. If we had used a HEX colour value the left button on white would no doubt be something like #dedede and the button on black would be #333333. So you can see that using RGBA allows us much more flexibility when rendering shadows.


Button Size

Now we have the main structure of our button set on the .button class we can now go ahead and setup some instances of size. below we’ve set the classes .small .medium .large and .super. In all cases except for the .medium button we’ve just adjusted the font size and padding with the same button structure.

       .small.button, .small.button:visited 			       { font-size: 11px}
	.button, .button:visited,
	.medium.button, .medium.button:visited 		{ font-size: 13px;
												  font-weight: bold;
												  line-height: 1;
												  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

	.large.button, .large.button:visited 			        { font-size: 14px;
											  padding: 8px 14px 9px; }

	.super.button, .super.button:visited 			{ font-size: 34px;
											  padding: 8px 14px 9px; }

Button Colour

The final step is to specify a CSS class for whatever colour we want our button(s) to be. In this case we have a set of predefined colours but you can adjust or add to these as you like.

.pink.button, .magenta.button:visited	{ background-color: #e22092; }
	.pink.button:hover					{ background-color: #c81e82; }
	.green.button, .green.button:visited	{ background-color: #91bd09; }
	.green.button:hover				        { background-color: #749a02; }
	.red.button, .red.button:visited		{ background-color: #e62727; }
	.red.button:hover					{ background-color: #cf2525; }
	.orange.button, .orange.button:visited	{ background-color: #ff5c00; }
	.orange.button:hover				{ background-color: #d45500; }
	.blue.button, .blue.button:visited   	        { background-color: #2981e4; }
	.blue.button:hover					{ background-color: #2575cf; }
	.yellow.button, .yellow.button:visited	{ background-color: #ffb515; }
	.yellow.button:hover				{ background-color: #fc9200; }

Wrapping Up

I like to put all of this style in a separate style sheet and adjust it to fit my needs. It’s completely flexible so you can easily add or remove styles to suit your needs.


More tutorials from Papermashup
  • Pingback: You are now listed on FAQPAL

  • vishal

    i downloaded the code.

    But it does not show anything

  • Pingback: 20 CSS3 Tutorials and Techiques for Creating Buttons - Speckyboy Design Magazine

  • Zahid

    This is nice but the problems start when u see in ie. The rounded edge is going and even though the shadow effect is also not there. Is any solution for that. If yes then it would be great

    • Ashley

      @Zahid, as I explained this is because IE doesn’t yet support CSS3.

  • Pingback: Create pretty CSS3 scaleable buttons

  • Dima

    Very nice! +1 (:

  • Deepu Balan

    Beautiful buttons… CSS3 rocks! Thanks for sharing Ashley :-)


  • Pingback: uberVU - social comments

  • Doug Montgomery

    These tutorials are popping up all over the web lately, but what i enjoy about your post Ashley is that it’s very to the point, and well designed so it almost mimics how you’d be implementing it yourself.

    Thanks, and great work. Cheers!

  • Mia

    Thank you for making this available & comprehensible Ashley- I had in fact seen these on Zurb and loved them- although I still have not decided as to where I will incorporate them as of yet, however : Im certain that the need will arise at some point . Greatly appreciate your efforts :D


    • Ashley

      @Mia, thanks for the feedback. Im still not completely comfortable about using CSS3 techniques as its not fully supported but this was a particularly nice technique that I wanted to share.