Botão CSS3

Botão básico com uso de recursos CSS3

by Roger Ramos

HTML

<input type="button" class="but" value="Botão" />

CSS

.but {
    text-shadow: 0 1px 0 #fff;
    border-color: #ccc #ccc #aaa;
    border-style: solid;
    border-radius: 2px;
    border-width: 1px;
    box-sizing: border-box;
    padding: 0 15px;
    cursor: pointer;
    font: normal 12px/23px Arial;
    background-color: #e0e0e0;
    -moz-box-shadow: inset 0 0 1px #fff;
    -ms-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    box-shadow: inset 0 0 1px #fff;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#fffafafa, EndColorStr=#ffdcdcdc);
    background-image: -moz-linear-gradient(top, #fafafa 0, #dcdcdc 100%);
    background-image: -ms-linear-gradient(top, #fafafa 0, #dcdcdc 100%);
    background-image: -o-linear-gradient(top, #fafafa 0, #dcdcdc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(100%, #dcdcdc));
    background-image: -webkit-linear-gradient(top, #fafafa 0, #dcdcdc 100%);
    background-image: linear-gradient(to bottom, #fafafa 0, #dcdcdc 100%)
}
.but:hover {
    border-color: #aaa #aaa #999;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#fff0f0f0, EndColorStr=#ffe6e6e6);
    background-image: -moz-linear-gradient(top, #f0f0f0 0, #e6e6e6 100%);
    background-image: -ms-linear-gradient(top, #f0f0f0 0, #e6e6e6 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0, #e6e6e6 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f0f0), color-stop(100%, #e6e6e6));
    background-image: -webkit-linear-gradient(top, #f0f0f0 0, #e6e6e6 100%);
    background-image: linear-gradient(to bottom, #f0f0f0 0, #e6e6e6...