html弄多个按钮_html+css3实现多个表单按钮美化效果

书写css代码。

.demo{width:200px; margin:60px auto 10px auto}

.wrap{margin:30px 0}

.wrap p{padding:10px 0}

.chk_1, .chk_2, .chk_3, .chk_4 { display: none; }

.chk_1 + label { background-color: #FFF; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 5px; display: inline-block; position: relative; margin-right: 30px; }

.chk_1 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }

.chk_1:checked + label { background-color: #ECF2F7; border: 1px solid #92A1AC; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: #243441; }

.chk_1:checked + label:after { content: '\2714'; position: absolute; top: 0px; left: 0px; color: #758794; width: 100%; text