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
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $14.00 
RoyalSlider – Touch-Enable ... only $12.00 
Osvaldas Valutis - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
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
Hey, is it possible to give a parameter to a CSS class?
Like calling class=”button(‘Button Name’)”, passing a string to change the name.
Jeff,
What do you use to edit the CSS directly in the browser?
Nevermind. I just re-watched the video and you mentioned it. DUH!!
your example including the font needs at least 26kb.
i think still spending time on building sprites is worth it’s time.
I agree with you completely. :) I mentioned that in the video tutorial.
now you got me and i will have a look in the video :-D
great mate …very usefull tutorial …i appreciate your great work.
Great tut! I especially like the baby crying in the background…makes me feel like I am watching at my house :-)
Another nice tutorial from you Jeffrey. Very useful once again. I just love the way you explain thing and how smooth you are in your tutorial.
BTW: There is a character mapping on each of the font-face kit. So instead of going mad to figure out what letter holds you little birdy, once you selected your font on top there is a character mapping and it tell you exactly which is which!
Ah – thanks!
really clever stuff!!
Thanks,
Great tutorial.. I’m now still trying to learn about css..
and learn this tutorial makes me moremoremore interested …
Nice job ..
Great tutorial! In which browsers will these techniques fail?
Looks great!
I won’t be using these modern CSS techniques yet (I don’t quite think there is enough browser support yet); but I’m still impressed!
A good fun exercise, thanks for sharing! I’m looking forward to the day when this sort of thing becomes practical!
Hi, Jeff! Thanks for you tuts. They’re really fun and helpful. Thank you for Web Developer tool, it’s really useful.
If I’m not mistaken that gradient doesn’t work in Chrome and Safari:
/* BACKGROUND GRADIENTS */
…….
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
………
You were right about …color-stop(.51.. That works for fine. I guess you forgot to fix it.
ANYWAY, THANK YOU, JEFF!
Amazing!!! Thanks so much!
you’re so good. 10x for tips
Awesome! Jeff you always have great tuts. The video was really good and I like how you did the button. It was a great tut to start the week
Greate tutorial, so easy to follow, keep this css3 stuff coming!
Great tutorial! In which browsers will these techniques fail?
visit this site movies.ewebtutorial.com
Jeff you rock!! Thanks for the great tutorial. Keep ‘em coming.
That is very clever.
Jeff – you da man! I just have to keep up!
Jeffrey This tutorial is really awesome!! Great Job.
Thanks Jeffrey!
Also we can modify that with:
li { display: inline-block; margin-left: 20px; }
.button { padding: 5px 25px; /*line-height: 40px;*/ color: white; [...]
and
Follow Me
to do a VERY NICE navigation menu!
Let me know, =)
Matt
lol, i want to type Follow Me
re-lol,
i want to type ‘li”a href=”#” class=”button”‘ Follow Me ‘/a”/li’
Hey, what are you using in that video for text editing? Is it any FF plugin or what? :)
It’s called the Web Developer Toolbar. Just a FF extension. :)
Thanks for the Tut, I really enjoyed it and learned a few things. Looking forward to the next one!
Really enjoyed the tutorial,
In the code there is a small typo on line 64, left bottombottom should be left bottom. Thanks again for sharing this technique!
I think the following site is awesome for creating CSS3 effects: http://westciv.com/tools/index.html
I’m not sure if fontsquirrel changed their EfonRegular font up a bit since the video was recorded, but when I copy/paste ur final code and open in it Firefox, the bird looks about 35px lower than where he should be. Did anyone else experience this?
Fantastic tutorial. Very clear and nicely explained. Nothing new in the CSS itself, of course, but it’s inspiring to see it all combined into such a nice effect.
This may be the best of the video tutorials I’ve seen from you. Thank you.
Hey Jeff,
This is an amazing Tutorial, Really Cool Effect! Also Can you re-size this easily? and May i use this on my Website?
Thank’s!
This is a fantastic tutorial. Nice job, Jeffrey. Your tutorials are so easy and simple to follow, and your videos make it even more easy to understand. I’ve watched 3 of your other tutorials, and I have to say that you’ve taught me so much in such a short amount of time. I’m going to use your examples as future references so I can practice and expand my knowledge of CSS3.
Once again, excellent work.
Thanks, Nathan!
Great tutorial, very useful and informative, many thanks for your time and sharing.
Great work …Thanks for Sharing, I really enjoyed it.
Great tutorial!
This tutorial is so easy and simple to follow, and your videos make it even more easy to understand. I’ve watched 3 of your other tutorials, and I have to say that you’ve taught me so much in such a short amount of time. I’m going to use your examples as future references so I can practice and expand my knowledge of CSS3.
Thanks!
Thanks for supplying the soucre file, very hand and great tut on making a hover shadow with CSS, I love it!
Thank you. This was very fun. Saves me from having to create a bunch of images. =]
Is it possible to use an actual image as compared to gradients? And if so, could I still out a border and shadow on it and change those border and shadow effects for hover and clicked states?
THANK YOU! Good POST!!
but, it doesn’t work in IE
Amazing tutorial… I’m gonna try it right away! Thank you!
Is it possible to make the width of the button depending on the string length ? (like automatically)