Nifty CSS buttons

/42

I was messing around with making buttons in CSS and thought I’d share the code I wrote. I discovered that using an inset shadow gives the button a little glow on the top.

Nifty button

Old and feeble browsers will display a button with a flat colour background, no rounded corners or text shadows and no opacity, but it will still work perfectly.

button {
    background: #333; /*old browser fallback*/
    background: -moz-linear-gradient(center top, #888, #333);
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
    -moz-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset; /* adds glow at the top */
    -webkit-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
    -o-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
    box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
    -moz-border-radius: 0.7em;
    -webkit-border-radius: 0.7em;
    -o-border-radius: 0.7em;
    border-radius: 0.7em;
    border:1px solid #444444;
    opacity:0.8; /*shows some of the background through*/
    text-shadow:1px 1px 0 rgba(250, 250, 250, 0.2);
    padding:1em 2em;
    font-size:1.1em;
    color:#fff;
}

button:hover,
button:focus,
button:active {
    cursor: pointer;
    opacity:1;
    -moz-box-shadow: 0 0 8px #3C72AC; /*adds a glow on hover*/
    -webkit-box-shadow: 0 0 8px #3C72AC;
    -o-box-shadow: 0 0 8px #3C72AC;
    box-shadow: 0 0 8px #3C72AC;
}