Attractive Button Styles

input[type=submit],
input[type=reset],
button,
.button,
.button:link,
.button:visited {
    display: inline-block;
    margin:0;
    padding:2px 6px 2px;
    white-space:pre;
    text-decoration:none;
    color:#444;
    vertical-align:middle;

    border:1px solid #aaa;

    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;

    background:#eee;
    background-image:-moz-linear-gradient(top,#f9f9f9,#ddd);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ddd));
    background-image:linear-gradient(top,#f9f9f9,#ddd);
}

input[type=submit]:hover,
input[type=submit]:focus,
input[type=reset]:hover,
input[type=reset]:focus,
button:hover,
button:focus,
.button:hover,
.button:focus {
    color:#444;
    border:1px solid #888;
}

input[type=submit]:active,
input[type=reset]:active,
button:active,
.button:active {
    background-image:-moz-linear-gradient(top,#ddd,#f9f9f9);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ddd),to(#f9f9f9));
    background-image:linear-gradient(top,#ddd,#f9f9f9);
}