how to use css inheritance for button colors
a.checkout-button {
    -webkit-transition:border-color 0.218s;
    background-position: initial initial;
    background-repeat: initial initial;
    border:0 solid #DCDCDC;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #EEEEEE;
    display: inline-block;
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-right: 10px;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
    text-shadow: #FFFFFF 0 0 0;
    text-transform: uppercase;
}
a.checkout-button .blue {
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
}
a.checkout-button .gray {
    background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
    background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
}

<a class="checkout-button gray" id="cancel-btn" href="">Cancel</a>
<a class="checkout-button blue" id="express-checkout-btn" href="">Express Checkout</a>

a.checkout-button .gray {

a.checkout-button.gray {

.a.checkout-button .blue {

a.checkout-button.blue {