Animated Checkbox Effect with Font Awesome

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

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<fieldset>
  <input class="radioBtn" 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" id="test-no" name="test" type="radio" value="No" />
  <label for="test-no"><div class="toggle-icon fa fa-check"></div> No</label>
</fieldset>

<fieldset>
  <input class="radioBtn" id="test2-item1" name="test2" type="checkbox" value="Item 1" />
  <label for="test2-item1"><div class="toggle-icon fa fa-check"></div> Item 1</label>

  <input class="radioBtn" id="test2-item2" name="test2" type="checkbox" value="Item 2" />
  <label for="test2-item2"><div class="toggle-icon fa fa-check"></div> Item 2</label>
</fieldset>

<!-- ignore this bit -->
<footer>
  <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

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
} // .radioBtn

input[type="checkbox"].radioBtn {
  + label .toggle-icon {
    border-radius: 0;
    
    &:after {
      border-radius: 0;
    }
  }
}