Build Awesome Practical CSS3 Buttons

Jeffrey Way on Nov 19th 2010 with 74 comments

Tutorial Details

Technology: CSS
Format: Video
Difficulty: Intermediate
Estimated Completion Time: 23 Minutes

This entry is part 15 of 16 in the CSS3 Mastery Session
« Previous Next »

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Video Tutorial

Final Code

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>
	<style>
	
	/* CUSTOM FONT */
	@font-face {
		font-family: 'EfonRegular';
		src: url('font/EFON-webfont.eot');
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
		font-weight: normal;
		font-style: normal;
	}	
	
	body {
	 width: 400px;
	 margin: 200px auto;
	 background: #666;
	}

	.button {
	 width: 400px;
	 height: 100px;
	 line-height: 100px;
	 color: white;
	 text-decoration: none;
	 font-size: 50px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;
	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	}
	
	/* WHILE HOVERED */
	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
	}
	
	/* WHILE BEING CLICKED */
	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
	}
	/* FONT GLYPH (MOSTLY FOR FUN) */
	.button:before {
		font-family: EfonRegular;
		content: 'v';
		color: #09232F;
		font-size: 90px;
		float: left;
		margin-left: 35px;
		margin-right: -10px;
		text-shadow: 0 1px 0 #4190AF;
	}
	
	</style>
</head>
<body>
     <a href="#" class="button"> Follow Me </a>
</body>
</html>

Conclusion

The truth is that it would probably be smarter to use a tiny image for the Twitter-bird icon. But, the goal was to achieve this effect with all CSS! What do you think?

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jeffrey Way

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

skaldic
all this code just for one button?

http://www.ibrightdev.com Justin St. Germain
you code it once and not have to make a bunch of graphics. so, it really isnt a lot when you think about it.
on another not, wasnt this tut on here before?

http://pceasies.com/ pceasies
> “Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.”
Yah, looks like they are just reposting popular articles.
http://www.ibrightdev.com Justin St. Germain
@pceasies, not complaining since it is a really good tut. i just think people should scroll through archives to find things. just my opinion though. i would rather see a cool new tut than one i have already seen and use similar techniques for myself. :)
http://toolnames.com Dale Hurley
I think if they are going to be reposted they should expand on the original idea. Post something that makes the original look ordinary.

http://toolnames.com Dale Hurley
Not really a lot.
tom
agrue, but typing this code is equal to design a photoshop button pixel perfect.

http://www.awmcreative.com wd
Nicely done. I’ll have to try this out.
http://www.markpetherbridge.co.uk Website Design Sheffield
Awesome, This is going to improve any future call to action buttons I create.
Thanks again: Bookmarked!
http://pacha.shimansky.ru/ Pavel Shimansky
Damn! So useful, I will definetely try it on my web-site!
http://www.parallaq.com Parallaq
We believe this is the future of modern web design. Technologies such as HTML5, CSS3, fast and concise JavaScript libraries like jQuery, MooTools and other, let us design a more dynamic and user-oriented websites. Substituting the image based solutions with CSS based one is definitely way to go.
http://www.edgaras.com Edgaras
Nice techniques! In this small code you can learn many things :)

http://www.ibrightdev.com Justin St. Germain
i like to make them with double borders too. check the one out here…
http://yourownbusiness.com/
css…
input.submit_btn {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
-moz-border-bottom-colors:#FF5A00 #FFFFFF;
-moz-border-left-colors:#FF5A00 #FFFFFF;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-right-colors:#FF5A00 #FFFFFF;
-moz-border-top-colors:#FF5A00 #FFFFFF;
-moz-box-shadow:0 1px 5px black;
background-attachment:scroll;
background-color:transparent;
background-image:-moz-linear-gradient(center top , #FF8024, #FF8825 50%, #FF5A00 51%, #FF5B00);
background-position:0 0;
background-repeat:repeat;
border-bottom-color:#FF5A00;
border-bottom-style:solid;
border-bottom-width:2px;
border-left-color-ltr-source:physical;
border-left-color-rtl-source:physical;
border-left-color-value:#FF5A00;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:solid;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:2px;
border-right-color-ltr-source:physical;
border-right-color-rtl-source:physical;
border-right-color-value:#FF5A00;
border-right-style-ltr-source:physical;
border-right-style-rtl-source:physical;
border-right-style-value:solid;
border-right-width-ltr-source:physical;
border-right-width-rtl-source:physical;
border-right-width-value:2px;
border-top-color:#FF5A00;
border-top-style:solid;
border-top-width:2px;
color:#FFFFFF;
font-family:’Univers67BoldCondensed’,sans-serif;
font-size:14pt;
padding-bottom:4px;
padding-left:4px;
padding-right:4px;
padding-top:4px;
text-align:center;
text-shadow:1px 1px 0 #973500;
width:192px;
}

http://montanaflynn.me Montana Flynn
Don’t forget cursor:pointer!!!
http://www.ibrightdev.com Justin St. Germain
@Montana Flynn, thanks for that, totally missed it.
http://www.meditationsonlife.com John
Wow, that is a lot of code for a button. I wonder if the browser downloading that 4kb worth of code and processing that would beat a 4kb gif on performance. Both are just as reusable, but the gif works in every browser without the JS hacks.
Nice job though, that is some impressive code.
http://www.ibrightdev.com Justin St. Germain
@John, you would be right on the processing power. the good part of using straight css, is you set it once for a particular style, and then have it applied to everything that the style is on. if you want to change it, you simple change the bit of css and it is effected throughout the site. that is the real major advantage. as for cross browser support, you are correct there too. i personally dont mind if i have a plain looking button in IE, and the css one in all other browsers just cause IMO, if you are using IE, then you shouldnt be using a computer. I know i shouldnt think that way, but, i cant help myself. it is like someone having an @aol.com email address now days.

http://www.johnernaut.com John J
Excellent tutorial! Thanks for the share.
http://twitter.com/izulchaniago IzC
Very Nice!!
http://tj.abderrahmane.com Abderrahmane TJ
Awesome as usually
Josh Messer
Isn’t this a repost of this
http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
Looks like the same button.

http://www.peewee1002.co.uk Peter Sawyer
“Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.”
http://www.tylercollins.co.uk/ Tyler Collins
Read the god damn post…
“Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.”

http://laroouse.com piyansitll
very nice button thanks a lot
sereal
very nice…i love this website !
thanks for this post Jeff, very useful.
Julio
remarcable as usual ;)
http://jonraasch.com Jon Raasch
Very nice, I’m a dork for drawing stuff with CSS (although the word “practical” in the title is a bit misleading when it comes to the bird icon heheh ;-))
Batfan
Nice but, looks like crap in every version of IE.

http://www.materialdesigner.com Chris
That’s what IE conditional spreadsheets are for.
No need to limit ourselves to the lowest common denominator because IE enjoys living in the 80s.

antony
Err IE still has the largest market share. I know what you’re trying to say though. I think it doesn’t help matters that the fallback background colours are the same for each state which is why there’s no rollover, if the fallbacks are updated it’ll work just fine in IE except for the obvious bits such as drop shadows and gradients.
http://nordahl.me Kenneth Nordahl
You just add a background image to the button in the different states in the IE spreadsheet.
http://www.ace-media.in/ Ace Media
IE has the largest share because 40% of the Indians still use pirated copies of Windows XP and don’t know what Firefox or Chrome is. (forget about Opera and Safari)
So they are still bundled on IE 6/7 (for XP Service pack 3).
P.S – I’m an Indian ;)

Cubics
Old?
o_O
Emmanence
I like the tutorial. Thanks!
http://www.how-to-asp.net Ryan
I’ve been using buttons very similar to these for quite a while, I must say, they work and look great. I highly recommend using them. Thanks for the great tut!
Andrea
If you wont to make it see in IE 6/7/8 use this sweet library:
http://css3pie.com/

http://www.chimply.net Dieter
haven’t tested it yet (no IE access right now ) but I really like the idea, thank you for sharing.

Andrea
With this also box shadow work great with round corners in all IE6+ browsers, this makes a lot of hadaches go away and make you save a lot of time with common effects.

http://zastica.com Dave
Nice little CSS3 demo. It’s a repost, but I don’t mind that. It’s always great to see creative examples of people taking full advantage of how powerful CSS3 is.
Dave
http://www.franckbret.com Franck Bret
Be aware that this technique won’t work on some browser, device, smartphone, etc and will display a very not pretty V in place of the bird. It also seems that there’s some caching issue, so for now it’s just an interesting experience…
Find more here :
http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/
http://paulirish.com/2010/font-face-gotchas/
http://nordahl.me Kenneth Nordahl
Simurai has created some beautiful CSS buttons with his Bonbon buttons – http://lab.simurai.com/css/buttons/
I would change the addition of the social icon to this to pull in the icon type from the HTML markup.
/*HTML*/
<a href=”#” class=”button” data-icon=”v”> Follow Me </a>
/*EDITED CSS*/
.button:before {
font-family: EfonRegular;
content: attr(data-icon);
color: #09232F;
font-size: 90px;
float: left;
margin-left: 35px;
margin-right: -10px;
text-shadow: 0 1px 0 #4190AF;
}
If you are in need of a social icon font and at the same time want to donate some money towards the Charity:Water foundation you could get my Writesocial font at http://kdnmedia.com
http://www.activo.com Ron Peled
This is great tutorial! Thanks for sharing. I especially liked the idea of using the Web Developer toolbar in firefox in order to instantly watch your CSS come alive. Will use this in the short future!
tarek
thank you jef
Cris
Hey Jeffrey, great tutorial, i read it the first time around and there still seem to have the same error in the css for the gradient in webkit, you have bottom twice…
See here:
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
http://Notyet ANAS
nice button Jeffry But the button dosen’t work On IE browsers THE 9 version i dont know about it , but the IE 8 dosen’t work On it

http://nordahl.me Kenneth Nordahl
This tutorial use CSS3 code that < IE9 cant handle. And: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

http://chang2034.wordpress.com jAVIER
yes, but ie9 (beta, off course) only support rounded corners…. the border ligh around image and double gradient and text shadow don’t work.
i hope that the final version work in this issues.
p.d.-.. nice “NO”.

Evelien
meow meow. purr purr.
love this tutorial!!! yezzurr
http://www.justforthealofit.com TheAL
The fact that you can make something like that with just CSS3 still tickles me. Buttons I made in Ps back in 2001 didn’t even look that nice.
Faust
very useful! thank you very much!!!
P.S. your cat is calling you…
next time feed him before doing the screencast :)
http://notnow a User
Thank you very much, its awesome !!
but i have a note on Browsers compatibility:
- using Opera(10.62)- Does not work
- using IE(9) – Does not work
- using FF – Works well
there is no hovering effect noticed in the browsers marked as does not work above !!
http://ufomuffin.com Ignacio
Very good looking, I wish all browsers supported this style.
Anyways, this goes straight to my library of CSS3 components.
Jeffrey rules.
http://www.laumedia.dk/ Kasper
Way awesome. :)
Sweet example on how to use CSS3, thanks.
Nate
Way to abuse CSS and promote such practices. Why don’t people realize that techniques like this are useless. Simple CSS gradients are good but no need for the glyphs and overly complicated gradients. Stop abusing CSS people.

http://www.jeffrey-way.com Jeffrey Way
Author
Not abuse in any way. This method is far more flexible than using an image.

Wacko
Really awesome tutorial, thanks a bunch!
http://www.veztekusa.com Faraz
You can do great things with CSS3 but main issue is,will it be supported by old browsers like IE version 6 etc ?
http://crazyhunk.com Crazyhunk
there is a slight problem with the pasted code on the page
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
it should read
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
remove the extra ‘bottom’ on the webkit-gradient lines
http://programanddesign.com Mark
That’s wicked! I think I’m going to use something like that in my current project. Thanks !
http://solydesigns.info SolY Mounir
Nice Topic , this is better than High Space images in buttons ..
http://www.think360studio.com/ Nicki
Wow! I learned something new. :)
http://www.zipbox.co.uk Stewart
Nice! Cant wait to be able to make all my call to action buttons in CSS.
RZV
Hello,
I make a simple example with linear gradient :
.bt1{
margin-left:31px;
padding:0;
background: -moz-linear-gradient(top, #03C, #F00);
}
It’s worked only in firefox.
I do not understand why not function in IE,Google Chrome,etc…
Thank you ,

Jm
haha because your only using -moz-linear;
use this:
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);

RZV
Can anybody tell me why it is not worked the linear gradient in IE,Google Chrome,…. ?
Thank you
http://mycodefixes@blogspot.com Ryan
This tutorial is so well done. I could not take off my attention for even one second the for the entire duration of the tut. Totally Enjoyed this!

http://www.jeffrey-way.com Jeffrey Way
Author
Thanks, Ryan!

Snakey
If i make more then one of these buttons is there a way to have them inline?
BTW nice tutorial
Chris
Hi guys,
you have a good site.
Thank you for this great tutorial!
yul
hi.. how to duplicate this button in same hmtl? thanks
http://www.html5xcss3.com Kimmy | Html5xcss3.com
Good button ! Thanks for sharing !
Anish | designcart.org
good one…nice tutorial……
sam
dont work on ie…..

ated that
you just need to upgrade your beloved ancient out of date browser to at least version 9 or better yet to version 10

Build Awesome Practical CSS3 Buttons

Tutorial Details

Video Tutorial

Final Code

Conclusion

Enjoyed this Post?

By Jeffrey Way

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Build Awesome Practical CSS3 Buttons

Tutorial Details

Video Tutorial

Final Code

Conclusion

Enjoyed this Post?

By Jeffrey Way

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter