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