Build Kick-Ass Practical CSS3 Buttons
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
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Looks GREAT! actually I need exactly blue button right now.
Wow! That is awesome.
Too much code for a button. But its good to learn how can this be done the other way.
Why go through all the hassle?
Because it’s fun. And you only have to do it once. :)
Yup! i agree it’s way too better … when it comes creating a class button… thanks it really helps..
its good, but its a lot of code for a button. don’t you think it can be reduced,
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. :)
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.
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
Probably not. :) It’s mostly for fun.
Just realized that Blip was displaying a low-res version of the video. Just fixed that — so it’s super crisp now.
i have problems on IE8
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.
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. :)
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!
About the “pushing toward the surface” animation, you can use scale transforms to shrink it and really drive the effect home.
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. :)
Please do the follow up mentioned below!
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?
@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.
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 :)
@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.
Heh, just try to open it in IE 8:D:D
But effect is fanstastic
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
It’s amazing
Thanks..
That is a kick ass button!
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!
I can’t believe that the bird is not an image, rather a special font character!
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
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.
This is cool looking, but why doesn’t it work on IE7?
Because IE7 doesn’t support these CSS3 properties.
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.
Ahh good to know. Thanks!
How about IE compatibility?
Your poor cat was crying
…good info nonetheless
Hey, that’s very cool, thanks for sharing
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
Can premium users download the screencasts? Cheers :-)
Hey Gav –
Starting now they can. So this video is available for download from within the Premium dashboard. :)
Awesome Tutorial… waiting for more fun tutorials like this one!
Thanks a lot!
very cool.thanks
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/
The button breaks if the user resizes the font. It should scale.
Awesome tutorial!
I’m wondering if you can do a text gradient type thing with css3???
The tweetie-bird doesn’t line up properly on Firefox 3.6.3 / Ubuntu 10.4. It’s too high.
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.
Once again excellent Tut. Great Effect. CSS3 Buttons are the way forward
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!
@Daniel – how about this cool stuff:
http://www.freethefoxes.com/
Jeff thanks again!
@Martin – Gold! Pure Gold!!!!!
Well done Jeff
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
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.
In which all browsers it will work????
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.
lol opera shows a V instead of a bird.. but nice work again Jeff !
Did you downloaded the fonts? Is what it uses to show the bird.
Nice tutorial. That button rocks :P
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!
Very cool and creative tutorial!
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
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!
Aaaah, it doesn’t work in IE6 ;)
Thanks Jeffrey!
Very cool! Thanks for the tutorial. B.T.W. there is a typo in the webkit-gradient part (bottombottom).
Very nice, Cheers!!
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
Sorry, but i cannot understand where the image came from?
It comes from the font, EFON-webfont.woff.
The image of the bird? It’s a font.