css3 padlock

<div>

  <input type="checkbox" id="padlock"/>

  <label for="padlock"><div></div></label>

</div>

@on: #484;

@off: #844;

body { background-image: linear-gradient(#eee, #aaa); }

div { margin: 45%; }

input { display: none; }

label { 

  display: inline-block;

  background: @off;

  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 @off;

  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 @off;

  display: inline-block;

  height: 1.5em;

  margin-left: 2.7em;

  margin-top: -1em;

  transition: all 1s ease;

}

input:checked + label {

  background: @on;

}

input:checked + label:before {

  border-color: @on;

  margin-top: -1em;

  transform: rotateY(0deg);

}

input:checked + label:after {

  border-color: @on;

  margin-top: 0;

}