Hi all.
Tonight I was browsing dribble.com when I stumbled on this impressive piece of design by David Lanham:
I wanted to replicate this buttons with some CSS3 styling, using all the cool new things you can get: border radius, box shadow, gradients and text shadow, to name a few.
I started with a simple standard HTML5 document.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Plastic Buttons</title>
</head>
<body>
<div class="container">
<a href="#" class="red button">Red</a>
<a href="#" class="blue button">Blue</a>
</div>
</body>
</html>
The results so far aren’t impressive. Let’s start to add some styling.
body {
background: #32383a;
}
.container {
width: 450px;
margin: 150px auto;
}
a, a:link, a:visited {
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
color: #ddd;
font-weight: bold;
}
Nothing complicated here: I set the background color for the page then positioned the buttons’ container roughly in the center of the viewport and gave some basic styling to the anchor tag, our button-to-be.
Now we can start to style our .button class. First I added some margin to separate the buttons apart from each other and some padding to set the button’s size and to place the text in the lower left corner.
I also set the line-height to 65 pixel in order to position the buttons well apart if you want to place them in two or more rows.
a.button {
margin: 10px 5px;
padding: 30px 40px 6px 10px;
line-height: 65px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
border: 2px solid #111;
-webkit-border-radius: 7px;
-mozborder-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
}
You can notice that I’m starting to use some new CSS3 styling: I added a slight hint of shadow to the button’s text with text-shadow (reference) to give it more depth.
I also gave the button a 2 pixel rounded dark border and two different box shadows: an highlight and a button’s drop shadow to the bottom (reference).
As you can see you can concatenate several box shadows together, to achieve different kind of effects.
Right now the buttons have the shape but not the colors we want, let’s use some CSS3 gradients!
a.red {
background: #b3312a; /* Old Browser */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #A02C28), color-stop(0.95, #C24B45), color-stop(0.96, #d4766e), color-stop(0.99, #C24B45)); /* Chrome, Safari4+ */
background: -moz-linear-gradient(center bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* FF3.6+ */
background: -webkit-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5A2A2', endColorstr='#C24B45', GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* W3C */
}
a.blue {
background: #202631; /* Old Browser */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #202631), color-stop(0.95, #3e464f), color-stop(0.96, #67717c), color-stop(0.99, #444f5e)); /* Chrome, Safari4+ */
background: -moz-linear-gradient(center bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* FF3.6+ */
background: -webkit-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202631', endColorstr='#3e464f', GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* W3C */
}
It seems a lot of code, but actually I wanted to use all the different browsers’ custom syntaxes. You can use this beautiful tool to test your colors and generate the code.
I tried to adhere to the original colors as mush as I could, playing with the percentages you can achieve subtle effects and reach amazing results.
Now it’s time to add some “animation” to our buttons, first by adding a glow effect to the a:hover state.
a.button:hover {
-webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
}
I enhanced the highlight around the button but you can do other things, like changing the gradient colors or whatever you like.
Finally I styled the a:active state in order to simulate the clicking of the button. I wanted to simulate the actual pressing of a plastic button, so I played with the padding and the relative positioning in order to move the text slightly 1 pixel to the top.
Then I also changed some percentages of the gradient to move the highlight to the top, just as the button is being pressed down. As a last thing I removed the glow effect of the hover state because I didn’t want to put too much stuff at the same time.
a.button:active {
position: relative;
top: -1px;
padding-top: 29px;
padding-bottom: 6px;
border-bottom: 3px solid #111;
-webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
}
a.red:active {
background: #b3312a; /* Old Browser */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #A02C28), color-stop(0.97, #C24B45), color-stop(0.98, #d4766e), color-stop(0.99, #C24B45)); /* Chrome, Safari4+ */
background: -moz-linear-gradient(center bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* FF3.6+ */
background: -webkit-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C24B45', endColorstr='#F5A2A2', GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* W3C */
}
a.blue:active {
background: #202631; /* Old Browser */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #202631), color-stop(0.97, #3e464f), color-stop(0.98, #67717c), color-stop(0.99, #444f5e)); /* Chrome, Safari4+ */
background: -moz-linear-gradient(center bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* FF3.6+ */
background: -webkit-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e464f', endColorstr='#202631', GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* W3C */
}
So, I think that’s all for tonight. I consider this just a little experiment and I hope you’ll find it useful.
I tested this code with Chrome 12, Safari 5 and Firefox 4. I know that it doesn’t work as intended on Internet Explorer but I don’t care.
You can find the final result and then some more on this page.
Bye,
L