Css href按钮

Question

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

.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;
}

Answer 1

您可以将颜色和背景与按钮分开，并为这些属性创建另一个类。即.blue和.red

然后，您可以在这些类中移动这些属性，同时应用：hover和：active selectors。

如果您想更改颜色，请更改html并将蓝色类更改为红色。

<强> HTML

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

CSS

 .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; }

DEMO http://jsfiddle.net/a_incarnati/douv8oby/