Build Kick-Ass Practical CSS3 Buttons

Jeffrey Way on May 12th 2010 with 123 comments

Tutorial Details

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

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. Also, I'm finishing up my latest book on Laravel Testing! 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

http://moscreative.com Serhiy
Looks GREAT! actually I need exactly blue button right now.
http://vultro.info TechMan8
Wow! That is awesome.
http://twitter.com/rmdsite Pixel Assassin
Too much code for a button. But its good to learn how can this be done the other way.
Owen
Why go through all the hassle?

http://www.jeffrey-way.com Jeffrey Way
Author
Because it’s fun. And you only have to do it once. :)

http://pinoyscreencast.com techie.biox
Yup! i agree it’s way too better … when it comes creating a class button… thanks it really helps..

http://xpressabhi.com abhishek @ xpressabhi
its good, but its a lot of code for a button. don’t you think it can be reduced,

http://www.jeffrey-way.com Jeffrey Way
Author
True — At this point, it’s mostly to see IF it can be done. Plus, this method allows for more flexibility than images. If you suddenly change your color scheme, and need to switch your buttons to red, you only need to edit a few hex values. :)
Stephen
It may be a lot of code but that’s a case for generic classes like .button. You only have to right once for many different buttons.

http://pinoyscreencast.com techie.biox
thus this load much faster that doing a slice image? although it’s a coded one but i like this technique.. css3 is really way into great designing..nice

http://www.jeffrey-way.com Jeffrey Way
Author
Probably not. :) It’s mostly for fun.

http://www.jeffrey-way.com Jeffrey Way
Author
Just realized that Blip was displaying a low-res version of the video. Just fixed that — so it’s super crisp now.
Paulo
i have problems on IE8
http://www.bryanwatson.ca Bryan Watson
Oh CSS-only buttons… How great you will be when we can forget about the vendor prefixes.
This definitely needs an :active state to simulate a “press” action on the button.
Also, this can be much more flexible if you use RGBA for the gradient and shadow colors. That way, to change the color of the entire button, only the border and background color would need to be changed.

http://www.jeffrey-way.com Jeffrey Way
Author
Hey Bryant – Good note about the active state. I forgot to add that. Just did a quick fix for now, adding a heavier shadow. Files have been updated. :)

http://www.markupninjas.com Ken Hanson
So, you know what would be REALLY sick, is if you used CSS Transitions on that gradient, and on press, it reverses to look pressed. You’d get a killer slide of color and it /might/ look like an actual press.
Also, one thing I’ve done before is to actually lessen the drop shadow on press and animate that, so that it looks like your actually squishing the button /toward/ the “surface” of the website.
I know your point wasn’t to get into CSS Transitions / Animations, but man this button could SING if you added that stuff!
http://markupninjas.com Ken Hanson
About the “pushing toward the surface” animation, you can use scale transforms to shrink it and really drive the effect home.
http://www.jeffrey-way.com Jeffrey Way
Author
Hey Ken – Very true. Didn’t want to get too insane with webkit transitions for this first tut, but it might make for a cool follow-up. :)
http://www.ecustom.ca LC
Please do the follow up mentioned below!
Wouter
Is it possible to use CSS transitions from one gradient to another? I’ve tried this and it doesn’t seem to work, maybe I’m doing something wrong. Did anyone try this?

http://www.bryanwatson.ca Bryan Watson
@Wouter – As far as I know, transition does not work on the gradients as of yet.
I know there is plans to implement that, but when you get into transitioning gradients it gets a little more complicated as to what exactly will be transitioned.
There is a workaround I believe (don’t quote me on this), where you can use a gradient / png background overlay, and simply transition the underlying background color to make it appear like it’s a gradient transitioning.

http://www.deluxeblogtips.com Deluxe Blog Tips
Very nice button. This is the 3rd tutorial about CSS3 button I’ve read (1 from ZURB, 1 from SmashingMagazine). All of them are really cool. I wish all browsers supported CSS3 now so that we can use it without thinking about compatibility :)
andy
@Owen – “Why do this?”
Why not do this? These kind of tutorials show people (useful or not useful) what is possible. Maybe someone reads this and thinks “I wonder if X is possible?” and that person then goes and tries to figure out how to do it and maybe even achieves it. That person has learned how to think outside the box and to find out if they can create something or do something differently. If that is all that is gained from a tutorial like this, then tuts like this KICK ASS!!!
As far as what this tut accomplishes, it’s pretty cool. It shows you can create highly detailed buttons without images. This should load faster than an image heavy site and with page size growing techniques like this will be useful, think about the mobile web. Secondly, updating a website is now independent of editable image files. You can edit everything about this button…with code only. So now making changes to the web site should be easier and faster. You can create and edit everything on a website (except for full on photographs) in a coding program…no more photoshop except for photograph editing.
Just open up firefox and go to “Edit CSS” in the web developer toolbar. Then go down to the CSS about the “glyph” and go the “content” attribute. Now change the “v” to a different letter. How cool is that? To update a website you simply save out the css and upload. done. simple. Had this been an image you would have had to open photoshop. (wait two minutes) then open the new “glyph.” replace the old glyph. Save it. Minimize for the web. upload. and if you changed the file name you would have to update your css or html files to reflect it. then upload them too. this is assuming of course you have the original button file that you can edit. if not you have to recreate the entire button.
so yes, I see the point to this technique. Might be a while before it becomes a standard and you can actually use it. But at least we can see what is possible.
“Why do this?” Why ask a question like that? if you don’t see the value in it, then move on.
Majkel
Heh, just try to open it in IE 8:D:D
But effect is fanstastic
http://www.dapperdeveloping.com Kevin
Just a question: why not set outline:none;, so that the active state doesn’t show the dotted border? It makes the click experience much nicer!
<3
http://sonergonul.com/ Soner Gönül
It’s amazing
Thanks..
http://www.jordanwalker.net Jordan Walker
That is a kick ass button!
Robin Andersson
This would be really practical… if all browsers supported it. :(
Atleast it’s good training now and it’s a lot more fun to experiment with CSS than with imagebased designs.
Thanks alot for the inspiration!
http://spotdex.com Davidmoreen
I can’t believe that the bird is not an image, rather a special font character!
http://www.go-shape.com Daniel Bidmon
Thats a very nice tutorial, thank you.
I was wondering, if there are some javascript files du emulate css3 selectors to non modern browsers. I was trying the “ie-css3.htc”, but its not as good as normal css3 selectors.
Do anyone got another JS Library to do this job?
Greetings
MattB
For anyone wants to use this stuff now, this may be a possibility for you:
52framework – XBrowser HTML5 / CSS3
Just search for it by name and you’ll find it easily enough.
Having used it, I find it suffices better than anything else I’ve found or would have done myself.
KB
This is cool looking, but why doesn’t it work on IE7?

http://www.jeffrey-way.com Jeffrey Way
Author
Because IE7 doesn’t support these CSS3 properties.

http://ardentpixels.com Josh Maxwell
Thanks for this!
Quick note: if you can’t find documentation about a font from FontSquirrell (love that site!) see if you can find it on dafont.com. I looked it up very quickly there and found the letters-to-symbols key.
Thanks again.

http://www.jeffrey-way.com Jeffrey Way
Author
Ahh good to know. Thanks!

http://www.ucarmetin.com/ Metin
How about IE compatibility?
http://www.ryanjwood.com Ryan
Your poor cat was crying
…good info nonetheless
jmarreros
Hey, that’s very cool, thanks for sharing
Damion
i think i learnt all the css before from net tuts but its nice to see them put together and now i have “.button:before/after” to play with. Thank you
Gav
Can premium users download the screencasts? Cheers :-)

http://www.jeffrey-way.com Jeffrey Way
Author
Hey Gav –
Starting now they can. So this video is available for download from within the Premium dashboard. :)

edanTal
Awesome Tutorial… waiting for more fun tutorials like this one!
Thanks a lot!
melih orhan
very cool.thanks
http://www.fuzeo.com/ Dan Sensecall
Nice tutorial, but its not particularly flexible, when it comes to having multiple different buttons.
Posted something much more flexible a while ago, using the same technique… http://fuzeo.com/tutorials/sexy-buttons-with-css3/
Riley
The button breaks if the user resizes the font. It should scale.
http://www.mjrportfolio.com Matt
Awesome tutorial!
I’m wondering if you can do a text gradient type thing with css3???
Patrick Corcoran
The tweetie-bird doesn’t line up properly on Firefox 3.6.3 / Ubuntu 10.4. It’s too high.
Martin
Jeffrey, dude! Thanks for everything you’re sharing!…My wife is getting jealous here, because i listen to your voice more often than i do to her():o)). Thanks again.
http://www.twentyeleven.co.uk Nigel
Once again excellent Tut. Great Effect. CSS3 Buttons are the way forward
Daniel Israel
Fantastic stuff. One small suggestion if I may… :) Since so many of us have to “degrade gracefully” for older browsers, it would be cool to see how you would do that…
Thanks for all the good stuff!

Martin
@Daniel – how about this cool stuff:
http://www.freethefoxes.com/
Jeff thanks again!

Daniel Israel
@Martin – Gold! Pure Gold!!!!!

Brad
Well done Jeff
http://sergiobobillier.blogspot.com Sergio Bobillier
Pretty cool. I wonder why the W3C doesn’t include all those effects in the official standard so that web developers can stop worrying about adding the same effect for two or three different browsers. Just one CSS line and just one syntax, remembering all those variations is pretty hard u can see myself coming back to net tuts to check the syntax again :S better to tag the tutorial from now :P

Matt
W3C will be adding these effects, except they are still working on the CSS3 spec. Mozilla and Webkit have just jumped the gun and developed these non-standard CSS attributes that will be deprecated once the CSS3 spec is final.

RSK
In which all browsers it will work????
http://www.designdotcode.com Agilius
Nice effects! To bad they don’t work on ubuntu with firefox 3.5.9. I wonder how many years will pass untill we’ll have the standard CSS3 and HTML5/XHMLT whatever.
arnold
lol opera shows a V instead of a bird.. but nice work again Jeff !

http://php.quicoto.com quicoto
Did you downloaded the fonts? Is what it uses to show the bird.

http://php.quicoto.com quicoto
Nice tutorial. That button rocks :P
flashmac
Not sure why there is so much fuss about alot of code… there is alot going on!
Its great to have a button like this ready to go. I recommend storing the button class as a snippet in your IDE/editor. It comes in handy on every site I do.
Good work JW!
http://www.tipoos.com Gil
Very cool and creative tutorial!
http://www.crearecommunications.co.uk David Wheatley
CSS 3 definitely has some interesting aspects. I’m looking forward to using it on commercial projects eventually, however this could be a long time so “progressive use” is the way i’m going to work.
I’ll be using it on personal projects straight away. Thanks for the post. Interesting stuff
http://embrangler.com embrangler
I’m all for CSS buttons. They’re great on performance, as text is much less data intensive, and part of the stylesheet (hence require fewer requests). Imagine a web where images are mostly used as pictures and much less for the site’s design <3. Power to the browsers!
http://www.concrete5.info Ron
Aaaah, it doesn’t work in IE6 ;)
Thanks Jeffrey!
Wouter
Very cool! Thanks for the tutorial. B.T.W. there is a typo in the webkit-gradient part (bottombottom).
http://owenw.co.uk Ows
Very nice, Cheers!!
Niels Schuddeboom
Nice tutorial! In the past one could download the video’s. (MOV or FLV). Is there a working way to do so, for private use? Thanks again Jeffrey
http://www.intenseblog.com Jennifer R
Sorry, but i cannot understand where the image came from?

John Barker`
It comes from the font, EFON-webfont.woff.
Riley
The image of the bird? It’s a font.

Build Kick-Ass 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 Kick-Ass 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