Build Kick-Ass Practical CSS3 Buttons

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!

Full Screencast

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?