SOURCE

<div id="buttonContainer">
        <input id="Button1" class="button blue" type="button" value="蓝色按钮" />
        <input id="Button2" class="button green" type="button" value="绿色按钮" />
        <input id="Button3" class="button orange" type="button" value="黄色按钮" />
        <input id="Button4" class="button grey" type="button" value="灰色按钮" />
        <br />
        <input id="Button5" class="button blue rounded" type="button" value="蓝色按钮" />
        <input id="Button6" class="button green rounded" type="button" value="绿色按钮" />
        <input id="Button7" class="button orange rounded" type="button" value="黄色按钮" />
        <input id="Button8" class="button grey rounded" type="button" value="灰色按钮" />
        <hr />
    </div>
    <p>将鼠标移动到按钮上看效果，再单击看效果</p>

.button { font: 16px 宋体, Arial, sans-serif; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); white-space: nowrap; display: inline-block; vertical-align: baseline; position: relative; cursor: pointer; padding: 10px 20px; border-radius: 8px; box-shadow: 0 0 1px #fff inset; }

.button:active { /* 单击时向下移动1px */ bottom: -3px; }

.button.rounded { border-radius: 4em; }

.blue.button { color: #0f4b6d !important; border: 1px solid #84acc3 !important; background-color: #48b5f2; }
.blue.button:hover { background-color: #63c7fe; }

.green.button { color: #345903 !important; border: 1px solid #96a37b !important; background-color: #79be1e; }
.green.button:hover { background-color: #89d228; }

.orange.button { color: #693e0a !important; border: 1px solid #bea280 !important; background-color: #e38d27; }
.orange.button:hover { background-color: #ec9732; }

.gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important; background-color: #a9adb1; }
.gray.button:hover { background-color: #b6bbc0; }