gistfile1.txt

For login button use: <a href="#" class="btnMed btnBlue">Login</a>

For large buttons use: <a href="#" class="btnLarge btnBlue btnIcon><img src="x.jpg" width="XX" height="XX" alt="Arrow icon" />Some Button</a>


/* Sitewide button styles */
.btnGrey, .btnOrange, .btnBlue, .btnCancel {
    display:inline-block;
    width:auto;
    text-align:center;
    font-size:11px;
    padding:0 8px;
    -moz-border-radius:3px;
    -webkit-botder-radius:3px;
    border-radius:3px;
    font-weight:normal;
    position:relative;
}
a.btnGrey, a.btnOrange, a.btnBlue, a.btnCancel {
    height:24px;
    line-height:24px;
}
input.btnGrey, input.btnOrange, input.btnBlue, input.btnCancel {
    padding-top:4px;
    padding-bottom:4px;
}
.btnGrey:hover, .btnOrange:hover, .btnBlue:hover {
    text-decoration:underline;
    cursor:pointer;
}
.btnGrey {
    border:1px solid #AAA;
    background:url('/images/bg_btn_grey_large.png') 0 0 repeat-x #CCC;
    color:#222;
}
.btnOrange {
    border:1px solid #E3651E;
    color:#FFF;
    background:url('/images/bg_btn_orange_large.png') 0 0 repeat-x #fd7a2f;
}
.btnBlue {
    border:1px solid #1070c7;
    color:#FFF;
    font-weight:bold;
    background:url('/images/bg_btn_blue_large.png') 0 0 repeat-x #2aa5f2;
}
.btnMed {
    font-size:13px;
    font-weight:bold;
    -moz-border-radius:4px;
    -webkit-botder-radius:4px;
    border-radius:4px;
}
.btnCancel {
    background:transparent !important;
    border:none !important;
    padding-top:2px;
    padding-bottom:2px;
    text-shadow:none !important;
}
.btnCancel.btnOrange {
    color:#E3651E;
}
.btnCancel.btnGrey {
    color:#424242;
}
a.btnMed {
    height:24px;
    line-height:24px;
}
input.btnMed {
    padding-top:5px;
    padding-bottom:5px;
}
.btnGrey.btnMed {
    
}
.btnOrange.btnMed {
    text-shadow:#222222 0 0 1px;
}
.btnBlue.btnMed {
    text-shadow:#222222 0 0 1px;
}

.btnLarge {
    font-size:20px;
    font-weight:bold;
    -moz-border-radius:6px;
    -webkit-botder-radius:6px;
    border-radius:6px;
    border:2px solid #d9d9d9;
    padding:0 25px;
}
a.btnLarge {
    height:45px;
    line-height:45px;
}
input.btnLarge {
    padding-top:19px;
    padding-bottom:19px;
}
.btnGrey.btnLarge {
    
}
.btnOrange.btnLarge {
    text-shadow:#222222 0 0 1px;
}
.btnBlue.btnLarge {
    text-shadow:#222222 0 0 1px;
}

.btnIcon {
    padding-left:25px;
}
.btnIcon > img {
    position:absolute;
    top:2px;
    left:5px;
}
.btnLarge.btnIcon {
    padding-left:65px;
}
.btnLarge.btnIcon > img {
    top:8px;
    left:25px;
}