按钮美化php,checkbox复选框美化按钮

收藏两个复选框美化版的，用起来也比较方便，又好看。纯css3构成的。颜色可以自己修改，id也可以修改为class.

样式一：

input[type="checkbox"] {

display: none;

}

input[type="checkbox"] + label {

cursor: pointer;

font-size: 1em;

}

[class^="cart_checkbox"] + 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: 9px;

display: inline-block;

position: relative;

margin-right: 10px;

}

[class^="cart_checkbox"] + label:active {

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

[class^="cart_checkbox"]:checked + label {

background-color: #D22147;

border: 1px solid #D22147;

box-shadow: 0 1px 2px #D22147, inset 0px -15px 10px -12px #D22147, inset 15px 10px -12px #D22147;

color: #243441;

}

[class^="cart_checkbox"]:checked + label:after {

content: '\2714';

position: absolute;

top: -3px;

left: 0px;

color: #ffffff;

width: 100%;

text-align: center;

font-size: 1.1em;

padding: 1px 0 0 0;

vertical-align: text-top;

}

.cart_checkbox label {

width: 10px;

height: 10px;

}

样式二：

input[type="checkbox"] {

display: none;

}

input[type="checkbox"] + label {

cursor: pointer;

font-size: 1em;

}

[id^="checkbox-11-"] + label {

background-color: #FFF;

padding: 11px 9px;

border-radius: 7px;

display: inline-block;

position: relative;

margin-right: 30px;

background: #F7836D;

width: 55px;

height: 10px;

box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);

}

[id^="checkbox-11-"] + label:before {

content: ' ';

position: absolute;

background: #FFF;

top: 0px;

z-index: 99999;

left: 0px;

width: 24px;

color: #FFF;

height: 32px;

border-radius: 7px;

box-shadow: 0 0 1px rgba(0,0,0,0.6);

}

[id^="checkbox-11-"] + label:after {

content: 'OFF';

position: absolute;

top: 7px;

left: 37px;

font-size: 1.2em;

color: white;

font-weight: bold;

left: 8px;

padding: 5px;

top: 4px;

border-radius: 100px;

}

[id^="checkbox-11-"]:checked + label {

background: #67A5DF;

box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);

}

[id^="checkbox-11-"]:checked + label:after {

content: 'ON';

left: 6px;

}

[id^="checkbox-11-"]:checked + label:before {

content: ' ';

position: absolute;

z-index: 99999;

left: 49px;

}

[id^="checkbox-11-"] + label:after {

left: 35px;

}