1. Code
  2. HTML & CSS

Build Awesome Practical CSS3 Buttons

This post is part of a series called CSS3 Mastery.
Getting Clever with CSS3 Shadows
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.

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



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?

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.