Result
CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです
各ボタンのスタイルはPenをご参照ください
css
#button -1 .knobs:before
{
content : 'YES' ;
position : absolute ;
top : 4px ;
left : 4px ;
width : 20px ;
height : 10px ;
color : #fff ;
font-size : 10px ;
font-weight : bold ;
line-height : 1 ;
text-align : center ;
padding : 9px 4px ;
background-color : #03A9F4 ;
border-radius : 50% ;
transition : 0.3 s cubic-bezier( 0.18 , 0.89 , 0.35 , 1.15 ) all ;
}
#button -1 .checkbox:checked + .knobs:before
{
content : 'NO' ;
left : 42px ;
background-color : #f44336 ;
}
#button -1 .checkbox:checked ~ .layer
{
background-color : #fcebeb ;
}
#button -1 .knobs, #button -1 .knobs:before, #button -1 .layer
{
transition : 0.3 s ease all ;
}
|
html
< div class = "toggle-button-cover" >
< div class = "button-cover" >
< div class = "button r" id = "button-1" >
< input type = "checkbox" class = "checkbox" >
< div class = "knobs" ></ div >
< div class = "layer" ></ div >
</ div >
</ div >
</ div >
|
via
Pure CSS Toggle Buttons | ON-OFF Switches