jsFiddle-style Button

Done with HSL and shadows.

by zerrax

HTML

<div class="button">+</div>

CSS

.button {
    cursor: pointer;
    width: 30px;    
    height: 30px;

    color: #fff;
    text-align: center;
    border: 1px solid hsl(0, 0%, 0%);
    text-shadow: 1px 1px 0px hsl(0, 0%, 12%);
    font-size:28px;
    -webkit-box-shadow: inset 0px 1px 0px hsl(0, 0%, 40%), inset 0px -10px 20px hsl(0, 0%, 22%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    -moz-box-shadow: inset 0px 1px 0px hsl(0, 0%, 40%), inset 0px -10px 20px hsl(0, 0%, 22%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    box-shadow: inset 0px 1px 0px hsl(0, 0%, 40%), inset 0px -10px 20px hsl(0, 0%, 22%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    background: hsl(0, 0%, 27%);

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.button:hover {
    -webkit-box-shadow: inset 0px 1px 0px hsl(0, 0%, 53%), inset 0px -10px 20px hsl(0, 0%, 35%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    -moz-box-shadow: inset 0px 1px 0px hsl(0, 0%, 53%), inset 0px -10px 20px hsl(0, 0%, 35%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    box-shadow: inset 0px 1px 0px hsl(0, 0%, 53%), inset 0px -10px 20px hsl(0, 0%, 35%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    background: hsl(0, 0%, 40%);
}

.button:active {
    -webkit-box-shadow: inset 0px 1px 0px hsl(0, 0%, 30%), inset 0px -10px 20px hsl(0, 0%, 19%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    -moz-box-shadow: inset 0px 1px 0px hsl(0, 0%, 30%), inset 0px -10px 20px hsl(0, 0%, 19%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    box-shadow: inset 0px 1px 0px hsl(0, 0%, 30%), inset 0px -10px 20px hsl(0, 0%, 19%), 0px 2px 10px hsla(0, 0%, 0%, 0.4);
    background: hsl(0, 0%, 25%);
}