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

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.

demodownload



More tutorials from Papermashup
Comments
35 discussions around Pretty CSS3 buttons
Newer Comments
  1. Pingback: You are now listed on FAQPAL

  2. vishal says:

    i downloaded the code.

    But it does not show anything

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

  4. Zahid says:

    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

  5. Pingback: Create pretty CSS3 scaleable buttons

  6. Dima says:

    Very nice! +1 (:

  7. Deepu Balan says:

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

    -Deepu

  8. Pingback: uberVU - social comments

  9. 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!

  10. Mia says:

    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

    M.

    • Ashley says:

      @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.

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.