Using some CSS3 and a bit of positioning, you can easily make good looking buttons for your web site. I’ve got two examples you can take a look at here. the first being buttons with a box-shadow.
1 2 3 4 5 6 7 8 9 10 11 | .button { background:-moz-linear-gradient(-90deg, #273C4F, #205275); background:-webkit-gradient(linear, left top, left bottom, from(#273C4F), to(#205275)); padding:10px 15px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.7); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.7); position:relative; text-shadow:1px 1px 1px rgba(0,0,0,0.5); } |
We’ve got a gradient on the background and a box-shadow to give the button some depth. I’ve also added some padding so you can use this on an anchor tag and it will look good no matter what text you have. But what’s with the position:relative? That comes into play on the active state for the button.
1 2 3 4 5 6 | .button:active { top:1px; left:1px; -moz-box-shadow:2px 2px 5px rgba(0,0,0,0.7); -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.7); } |
What happens here is that the when the button is clicked, it moves down and left one pixel and the shadow is decrease by one pixel to give it the effect of going down when it’s clicked on.
Now these look like hovering buttons but the same effect can be had on buttons you want to look like they’re going down into the background.
1 2 3 4 5 6 7 8 9 | .button2 { background:-moz-linear-gradient(-90deg, #1987FF, #0055B2); background:-webkit-gradient(linear, left top, left bottom, from(#1987FF), to(#0055B2)); padding:10px 15px; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; text-shadow:1px 1px 1px rgba(0,0,0,0.5); } |
Pretty much the same thing, but you’ll notice there’s no box-shadow. Now for the active state.
1 2 3 4 5 6 | .button2:active { top:1px; left:1px; -moz-box-shadow:inset 2px 2px 5px rgba(0,0,0,0.7); -webkit-box-shadow:inset 2px 2px 5px rgba(0,0,0,0.7); } |
Now we add the box-shadow and set it to inset and it looks like the button is being pressed into the background. There’s one unexpected bug I came across with this one, the inset box-shadow doesn’t display right in Chrome on Windows, but it looks great in Firefox and in Safari. Why it doesn’t work in Chrome, I don’t know but hopefully, they’ll fix this bug quick, because I think this is a great looking effect that web designers have a real use for.