Sexy checkbox in pure CSS

by Andrew Dunai

HTML

<input type="checkbox" class="pure-checkbox" id="i-like-cheese" />
<label for="i-like-cheese">Do you like cheese?</label>

SCSS

$size: 20px;

.pure-checkbox {
  display: none;
}

.pure-checkbox + label {
  position: relative;
  padding-left: $size * 1.5;
}

.pure-checkbox + label:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: $size;
  height: $size;
  vertical-align: middle;
  border: 2px solid #AAA;
  -border-radius: 50%;
  transition: all 0.15s ease-out;
}

.pure-checkbox:checked + label:before {
  border: 2px solid #0A0;
}

.pure-checkbox + label:after {
  content: '';
  position: absolute;
  top: $size / 5; // Top: 1/5 (20%)
  left: $size / 5; // Left: 1/5 (20%)
  width: $size / 5 * 3; // Width: 3/5 (60%)
  height: $size / 5 * 3; // Height: 3/5 (60%)
  background: #00AA00;
  transition: all 0.15s ease-out;
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

.pure-checkbox:checked + label:after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}