<div>
<div>
<input type="checkbox" id="padlock"/>
<label for="padlock"><div></div></label>
</div>
: #484;
#484;:
#844;:
body { background-image: linear-gradient(#eee, #aaa); }
div { margin: 45%; }
input { display: none; }
label {
display: inline-block;
background: ;
border-radius: 1em;
height: 3.5em;
width: 3.5em;
transition: all 1s ease;
}
label > div:before {
content: '';
border: .5em solid white;
display: inline-block;
border-radius: 50%;
margin-left: -0.74em;
margin-top: -0.5em;
position: absolute;
}
label > div {
border-left: .5em solid white;
display: inline-block;
height: 1.5em;
left: 1.5em;
top: 1em;
position: absolute;
}
label:before {
content: '';
border: .3em solid ;
border-bottom: none;
display: inline-block;
position: absolute;
border-radius: 1.5em 1.5em 0 0;
height: 1em;
width: 2em;
margin-left: 0.5em;
margin-top: -1.7em;
transform-origin: 2.33em 0 0;
transform: rotateY(180deg);
transition: all 1s ease;
}
label:after {
content: '';
border-left: .3em solid ;
display: inline-block;
height: 1.5em;
margin-left: 2.7em;
margin-top: -1em;
transition: all 1s ease;
}
input:checked + label {
background: ;
}
input:checked + label:before {
border-color: ;
margin-top: -1em;
transform: rotateY(0deg);
}
input:checked + label:after {
border-color: ;
margin-top: 0;
}