btn color

by James Doyle

HTML

<a class="btn">btn button</a>
<a class="btn red">red button</a>
<a class="btn orange">orange button</a>
<a class="btn green">green button</a>
<a class="btn blue">blue button</a>

CSS

body {
    margin: 10px;
}

a.btn {
    font-family: sans-serif;
    cursor: pointer;
    margin: 0 5px;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color: #333;
    font-size:12px;
    padding:3px 12px;
    text-decoration:none;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
a.btn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
a.btn:active {
    position:relative;
    top:1px;
}

a.btn.red {
    color: white;
    border:1px solid #d02718;
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
    background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
    background-color:#f24537;
}
a.btn.red:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
    background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537...