CSS 3 Buttons Are Cool!

When I was redesigning the site I'm developing a new WordPress 3.0 app, I just happened to stumble across a simple way to create some cool buttons that can use different colors. Since the site I'm making is all HTML 5 and CSS 3 this was an added bonus. I just happened to make a change to the CSS using Firebug, and realized what could be possible just by adding a <span> to the anchor element which had the CSS class 'button'.

By doing that, you are then able to style the span separately, and thereby creating an inset or outset look to the button.

Create the blue button

Here is the code I used to make it. Just play with the color values if you want to make different colored buttons. I suggest using Firebug to do this so you can see your changes in real-time without refreshing the page.

.button span {
box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
-moz-box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
-webkit-box-shadow:1px 1px 2px rgba(255, 255, 255, 0.8);
background:rgba(222, 231, 238, 0.8);
border-color:#4884D7 #4A7EFF #E0E6E5 #91B4FF;
border-style:solid;
border-width:1px;
color:#3B718E;
font-family:Palintino Linotype;
padding:6px 12px;
text-shadow:0 1px 0 #FFFFFF;
}
style.css (line 248)
.button, .button span {
-moz-border-radius:5px 5px 5px 5px;
-moz-box-shadow:1px 1px 0 rgba(255, 255, 255, 0.5);
background-image:-moz-linear-gradient(center top , #76CFFF, #3D81EE);
border:1px solid #0386FF;
display:block;
float:left;
font-family:Palintino Linotype;
font-size:14px;
font-weight:bold;
padding:5px;
text-shadow:1px 1px 0 rgba(247, 255, 255, 0.9);
}

Here is all the HTML needed

<a class="button" href="#"><span>Button</span></a>

It's not really anything too special, but I thought it was pretty cool, and I haven't see any CSS 3 buttons quite like this before. Most I see are done a similar way as the buttons you see at the top right of this site. Yes those are just CSS 3 buttons. Have fun!