很漂亮的复选框，单选框，开关效果
/* .slideOne */
.slideOne {
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;
position: relative;
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2) );
label {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -3px;
left: -3px;
cursor: pointer;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include border-radius( 50px );
@include box-shadow( 0px 2px 5px 0px rgba(0,0,0,0.3) );
@include transition( all .4s ease );
}
input[type=checkbox] {
visibility: hidden;
&:checked + label {
left: 37px;
}
}
}
/* end .slideOne */
/* .slideTwo */
.slideTwo {
width: 80px;
height: 30px;
background: #333;
margin: 20px auto;
position: relative;
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2) );
&:after {
content: '';
position: absolute;
top: 14px;
left: 14px;
height: 2px;
width: 52px;
background: #111;
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2) );
}
label {
display: block;
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
top: 4px;
z-index: 1;
left: 4px;
background: #fcfff4;
@include border-radius( 50px );
@include transition( all .4s ease );
@include box-shadow( 0px 2px 5px 0px rgba(0,0,0,0.3) );
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
&:after {
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 6px;
left: 6px;
background: #333;
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9) );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label {
left: 54px;
&:after {
background: #00bf00;
}
}
}
}
/* end .slideTwo */
/* .slideThree */
.slideThree {
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
position: relative;
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2) );
&:after {
content: 'OFF';
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
@include text-shadow( 1px 1px 0px rgba(255,255,255,.15) );
}
&:before {
content: 'ON';
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include border-radius( 50px );
@include transition( all .4s ease );
@include box-shadow( 0px 2px 5px 0px rgba(0,0,0,0.3) );
}
input[type=checkbox] {
visibility: hidden;
&:checked + label {
left: 43px;
}
}
}
/* end .slideThree */
/* .roundedOne */
.roundedOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
@include background( linear-gradient(top, #222 0%, #45484d 100%) );
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1) );
&:after {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #00bf00;
@include background( linear-gradient(top, #00bf00 0%, #009400 100%) );
@include opacity( 0 );
@include border-radius( 50px );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
}
&:hover::after {
@include opacity( 0.3 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opacity( 1 );
}
}
}
/* end .roundedOne */
/* .roundedTwo */
.roundedTwo {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
@include background (linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include border-radius ( 50px );
@include box-shadow ( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
@include background ( linear-gradient(top, #222 0%, #45484d 100%) );
@include border-radius ( 50px );
@include box-shadow ( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1) );
&:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
@include opacity ( 0 );
@include transform ( rotate(-45deg) );
}
&:hover::after {
@include opacity ( 0.3 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opacity ( 1 );
}
}
}
/* end .roundedTwo */
/* .squaredOne */
.squaredOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
@include background( linear-gradient(top, #222 0%, #45484d 100%) );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1) );
&:after {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #00bf00;
@include background( linear-gradient(top, #00bf00 0%, #009400 100%) );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
@include opacity( 0 );
}
&:hover::after {
@include opacity( 0.3 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opacity( 1 );
}
}
}
/* end .squaredOne */
/* .squaredTwo */
.squaredTwo {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
@include background( linear-gradient(top, #222 0%, #45484d 100%) );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1) );
&:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
@include opacity( 0 );
@include transform( rotate(-45deg) );
}
&:hover::after {
@include opacity( 0.3 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opacity( 1 );
}
}
}
/* end .squaredTwo */
/* .squaredThree */
.squaredThree {
width: 20px;
position: relative;
margin: 20px auto;
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
@include background( linear-gradient(top, #222 0%, #45484d 100%) );
@include border-radius( 4px );
@include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4) );
&:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
@include opacity( 0 );
@include transform( rotate(-45deg) );
}
&:hover::after {
@include opacity( 0.3 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opacity( 1 );
}
}
}
/* end .squaredThree */
/* .squaredFour */
.squaredFour {
width: 20px;
position: relative;
margin: 20px auto;
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #fcfff4;
@include background( linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%) );
@include border-radius( 4px );
@include box-shadow( inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5) );
&:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;
background: transparent;
@include opacity( 0 );
@include transform( rotate(-45deg) );
}
&:hover::after {
@include opacity( 0.5 );
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
@include opa
