Css href按钮

创建链接按钮的其他颜色的最佳方法是什么，而不必一次又一次地复制整个内容。 我已经有一个蓝色的按钮了。。现在我想要另一个橙色或绿色的按钮

.blue-button {
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.blue-button:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
.blue-buttonk:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}

---

您可以从按钮中分离颜色和背景，并仅为这些属性创建另一个类。i、 蓝色和红色

然后，还可以应用：hover和：active选择器在这些类中移动这些属性

如果要更改颜色，请更改html并将类blue更改为红色

HTML

---

演示

创建一个基本按钮类，该类包含所有标准属性，如边框半径、填充、框阴影、用户选择等，以及仅用于颜色等的附加类。这就是你要找的吗？@Harry-这是一个很好的答案。@misterManSam:只是检查一下这是否真的是OP想要的：@Harry-谢谢，太完美了-kudos@user244394：欢迎你，伙计。很高兴能帮上忙。我不想把这一点作为答案，因为在同一行上已经发布了另一条，我不想重复：

<div class="button blue">Click me</div>

 .button {
        display:inline-block;
        padding: 10px 15px;    
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: solid 1px #20538D;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    .button:hover {
        background: #356094;
        border: solid 1px #2A4E77;
        text-decoration: none;
    }
    .button:active {
        -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        border: solid 1px #203E5F;
    }

    .button.blue{background: #4479BA; color: #FFF;}
    .button.blue:hover{ background: #356094; }
    .button.blue:active { background: #2E5481; }

    .button.red{background: red; color: yellow;}
    .button.red:hover{ background: green; }
    .button.red:active { background: pink; }