Build Kick-Ass Practical CSS3 Buttons
videos

Build Kick-Ass Practical CSS3 Buttons

on May 12th 2010 with 123 comments
Tutorial Details
  • Technology: CSS
  • Format: Video
  • Difficulty: Intermediate
  • Estimated Completion Time: 23 Minutes
Download Source Files
Demo View It Online

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

Button

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

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
← Older Comments
  • http://Bob.com Bob

    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.

  • 12Bo

    Jeff,
    What do you use to edit the CSS directly in the browser?

    • 12Bo

      Nevermind. I just re-watched the video and you mentioned it. DUH!!

  • http://twitter.com/Webling Webling

    your example including the font needs at least 26kb.
    i think still spending time on building sprites is worth it’s time.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I agree with you completely. :) I mentioned that in the video tutorial.

      • Webling

        now you got me and i will have a look in the video :-D

  • Agon

    great mate …very usefull tutorial …i appreciate your great work.

  • Jeff

    Great tut! I especially like the baby crying in the background…makes me feel like I am watching at my house :-)

  • Jean-Francois

    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!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Ah – thanks!

  • http://www.rikmg.co.uk Richard Graham

    really clever stuff!!

    Thanks,

  • http://www.myboni.com Boni

    Great tutorial.. I’m now still trying to learn about css..
    and learn this tutorial makes me moremoremore interested …
    Nice job ..

  • http://www.antonagestam.se/ Anton Agestam

    Great tutorial! In which browsers will these techniques fail?

  • http://www.dev-hq.co.uk Joe

    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!

  • Jeff

    A good fun exercise, thanks for sharing! I’m looking forward to the day when this sort of thing becomes practical!

  • Vlad

    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!

  • http://www.silverfishdesign.co.cc Everett

    Amazing!!! Thanks so much!

  • http://www.ewallpaperstock.com/ wallpaperstock

    you’re so good. 10x for tips

  • http://createmy.com.au Dale Hurley

    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

  • http://www.vectelligence.com Ilie Ciorba

    Greate tutorial, so easy to follow, keep this css3 stuff coming!

  • row

    Great tutorial! In which browsers will these techniques fail?
    visit this site movies.ewebtutorial.com

  • http://www.sladewebsolutions.com Thomas Slade

    Jeff you rock!! Thanks for the great tutorial. Keep ‘em coming.

  • http://www.arminder.co.uk Arminder Dahul

    That is very clever.

    Jeff – you da man! I just have to keep up!

  • Devid

    Jeffrey This tutorial is really awesome!! Great Job.

  • Matt

    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

    • Matt

      lol, i want to type Follow Me

      • Matt

        re-lol,

        i want to type ‘li”a href=”#” class=”button”‘ Follow Me ‘/a”/li’

  • http://www.kurkit.lt/ Tautvydas

    Hey, what are you using in that video for text editing? Is it any FF plugin or what? :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s called the Web Developer Toolbar. Just a FF extension. :)

  • Chris

    Thanks for the Tut, I really enjoyed it and learned a few things. Looking forward to the next one!

  • http://nashinteractivellc.com Nathan

    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!

  • Dan

    I think the following site is awesome for creating CSS3 effects: http://westciv.com/tools/index.html

  • Ankur

    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?

  • Patrick

    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.

  • http://www.twitter.com/TheEliteNoob TheEliteNoob

    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!

  • Nathan

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Nathan!

  • http://www.orbisit.co.uk/ IT Support

    Great tutorial, very useful and informative, many thanks for your time and sharing.

  • http://www.gurufurniture.co.uk Max

    Great work …Thanks for Sharing, I really enjoyed it.

  • http://www.tenaxtechnologies.com java developer

    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!

  • http://www.mttamborineaccommodation.com.au/ Brad

    Thanks for supplying the soucre file, very hand and great tut on making a hover shadow with CSS, I love it!

  • Lacey

    Thank you. This was very fun. Saves me from having to create a bunch of images. =]

  • http://L1ke20N1njas.deviantART.com/ Adam

    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?

  • http://modcos.com Oleg

    THANK YOU! Good POST!!

  • Say

    but, it doesn’t work in IE

  • http://chotudochai.info Vijay

    Amazing tutorial… I’m gonna try it right away! Thank you!

  • Alex W.

    Is it possible to make the width of the button depending on the string length ? (like automatically)

  • robindesbois100

    hi

    i want to use a tag into

    but the css change color and font

    but the symbol don’t appear

    why ?

  • soda

    fantastic!!!

    how do insert an image instead of a face font with the twitter?

    Cheers.

  • f

    absolutely stupid!

  • Iris

    Wow thank you for this great tutorial. I tend to avoid videos because of their lack of clarity, but this video was really easy to follow and understand.

  • Ashik

    Amazing! Thanks for this tutorial.

← Older Comments