Build Kick-Ass Practical CSS3 Buttons
videos

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

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?

Add Comment

Discussion 118 Comments

Comment Page 2 of 2 1 2
  1. Bob says:

    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.

  2. 12Bo says:

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

  3. Webling says:

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

  4. Agon says:

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

  5. Jeff says:

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

  6. Jean-Francois says:

    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!

  7. really clever stuff!!

    Thanks,

  8. Boni says:

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

  9. Great tutorial! In which browsers will these techniques fail?

  10. Joe says:

    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!

  11. Jeff says:

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

  12. Vlad says:

    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!

  13. Everett says:

    Amazing!!! Thanks so much!

  14. you’re so good. 10x for tips

  15. Dale Hurley says:

    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

  16. Ilie Ciorba says:

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

  17. row says:

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

  18. Thomas Slade says:

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

  19. That is very clever.

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

  20. Devid says:

    Jeffrey This tutorial is really awesome!! Great Job.

  21. Matt says:

    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

  22. Tautvydas says:

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

  23. Chris says:

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

  24. Nathan says:

    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!

  25. Dan says:

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

  26. Ankur says:

    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?

  27. Patrick says:

    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.

  28. TheEliteNoob says:

    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!

  29. Nathan says:

    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.

  30. IT Support says:

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

  31. Max says:

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

  32. 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!

  33. Brad says:

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

  34. Lacey says:

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

  35. Adam says:

    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?

  36. Oleg says:

    THANK YOU! Good POST!!

  37. Say says:

    but, it doesn’t work in IE

  38. Vijay says:

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

  39. Alex W. says:

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

Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.