Untitled

<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: .5em;

  height: 1.75em;

  width: 1.75em;

  transition: all 1s 0s ease;

}

label > div:before {

  content: '';

  border: .25em solid white;

  display: inline-block;

  border-radius: 50%;

  margin-left: -0.37em;

  margin-top: -0.25em;

  position: absolute;

}

label > div {

  border-left: .25em solid white;

  display: inline-block;

  height: .75em;

  left: .75em;

  top: .5em;

  position: absolute;

}

label:before {

  content: '';

  border: .2em solid @off;

  border-bottom: none;

  display: inline-block;

  position: absolute;

  border-radius: .75em .75em 0 0;

  height: .7em;

  width: .73em;

  margin-left: 0.325em;

  margin-top: -1em;

  transform-origin: 1em 0 0;

  transform: rotateY(180deg);

  transition: margin-top 1s 0s ease, transform 1s 1s ease,border-color 1s 0s ease;

}

label:after {

  content: '';

  border-left: .2em solid @off;

  display: inline-block;

  position: absolute;

  height: .75em;

  margin-left: 1.3em;

  margin-top: -.5em;

  transform: rotateY(180deg);

  transition: margin-top 1s 0s ease, transform 1s 1s ease,border-color 1s 0s ease;

}

input:checked + label {

  transition: all 1s 2s ease;

  background: @on;

}

input:checked + label:before {

  transition: margin-top 1s 1s ease, transform 1s 0s ease,border-color 1s 2s ease;

  border-color: @on;

  margin-top: -.5em;

  transform: rotateY(0deg);

}

input:checked + label:after {

  transition: margin-top 1s 1s ease, transform 1s 0s ease,border-color 1s 2s ease;

  border-color: @on;

  margin-top: 0;

  transform: rotateY(0deg);

}