Advertisement

Build Awesome Practical CSS3 Buttons

by
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

<!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?