CSS3 Buttons

Found information on how to generate nice aqua-like buttons in CSS3 without resorting to taking screenshots of buttons created in the gimp. It has that nice characteristic where the size of the button is directly related to its contents. The just look good no matter how you spin them.

The information was culled from first: GirlieMac! and then from schillmania.

In my personal opinion the CSS presented in the schillmania article is slightly cleaner (usage of em rather than px, etc...) so I went and took both forms and mixed and matched to create a system by which I could easily produce any sort of button color that I like.

Let me present the html.

  
    <a class="button green">Click Me!</a>
    <div class="button orange">Click Me!</div>
  

Which is quite nice because I can apply the button and color classes to whatever block-like elements I choose. Now for my version of the CSS.

  
a.button {
    color:#FFFFFF;
    text-decoration: none;
}

.button {
    border:2px solid #CCCCCC;
    color:#FFFFFF;
    cursor:pointer;
    display:inline-block;
    font-size:0.75em;
    font-family:Lucida Sans,Helvetica,Verdana,sans-serif;
    font-weight:bold;
    margin:0.5em 0 1em;
    overflow:hidden;
    padding:0.25em 0.5em 0.3em;
    position:relative;
    text-align:center;
    text-shadow:1px 2px 2px rgba(10, 10, 10, 0.5);
    vertical-align:middle;
    white-space:nowrap;
    width:5em;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
}

.button:hover {
    text-shadow: 0 0 5px #FFFFFF;
}

.button>span {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);
    background-color:rgba(255, 255, 255, 0.25);
    display:block;
    height:40%;
    left:3.5%;
    position:absolute;
    top:0;
    width:94%;
}

.grey {
    background-color:rgba(128, 128, 128, 0.75);
    border-color: #999999;
    text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 8px 24px rgba(192, 192, 192, 0.75);
    -webkit-box-shadow:0 8px 24px rgba(192, 192, 192, 0.75);
}

.orange {
    background-color:#EE5526;
    border-color:#F7A250 #F7A050 #EF925E #F6A460;
    -moz-box-shadow:0 10px 16px rgba(237, 96, 46, 0.5);
    -webkit-box-shadow:0 10px 16px rgba(237, 96, 46, 0.5);
}

.aqua {
    background-color: rgba(60, 132, 198, 0.8);
    border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
    -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
    -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
}

.green {
    background-color: rgba(60, 132, 60, 0.8);
    border-color: #639b60;
    -webkit-box-shadow: rgba(66, 140, 66, 0.5) 0px 10px 16px;
    -moz-box-shadow: rgba(66, 140, 66, 0.5) 0px 10px 16px;
}