Animated Checkbox Effect with Font Awesome

Proof of concept for an animated checkbox thing on radio butons.

by LijoCheeran

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<input class="radioBtn true" id="test-yes" name="test" type="radio" value="Yes" />
<label for="test-yes"><div class="toggle-icon fa fa-check"></div> Yes</label>

<input class="radioBtn false" id="test-no" name="test" type="radio" value="No" />
<label for="test-no"><div class="toggle-icon fa fa-check"></div> No</label>

SCSS

// This CSS is messy AF. Please don't use it.
$blueLightOp50: #e1e9f1;
$blue: #2081bf;
$white: #fff;

.btn,
.btn-extension {
  background: $white;
  border: 2px solid $blue;
  border-radius: 6px;
  color: $blue;
  cursor: pointer;
  font-size: 19px;
  text-align: center;
  text-decoration: none;

  &:hover,
  &:focus {
    background: $blueLightOp50;
  }
} // .btn

.radioBtn {
  left: -99999px;
  position: absolute;
  
  + label {
    @extend .btn-extension;

    border-radius: 4px;
    display: inline-block;
    padding: .5em;
    position: relative;

    .toggle-icon {
      background: $white;
      border: 3px solid $blue;
      border-radius: 19px;
      display: block;
      float: left;
      font-family: FontAwesome;
      margin-right: 10px;
      overflow: hidden;
      padding: 2px;
      position: relative;

      &:after {
        background: $white;
        border-radius: 19px;
        content: ' ';
        height: 1.25em;
        left: 0;
        position: absolute;
        top: 0;
        width: 1.25em;
      }
    } // .toggle-icon
  } // + label
  
  &:checked {
    + label {
      background: $blue;
      color: $white;

      .toggle-icon {
        border-color: $white;
        color: $blue;

        &:after {
          left: 100%;
          transition: all .5s;
        }
      } // .toggle-icon
    } // + label
  } // &:checked
} // input[type="radio"].radioBtn

/* IGNORE THIS BIT YO */
footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

footer p {
    margin: 0;
}