CodePen Embed - Pure CSS3 Checkboxes with FontAwesome

<div class="container">
  <h1><span>Checkboxes <i class="fa fa-check" aria-hidden="true"></i></span> with FontAwesome and CSS3 vol.1</h1>
  <a href="https://github.com/eisenfox/checkboxes-css3" target="_blank" title="Check on github"><i class="fa fa-check" aria-hidden="true"></i> Check on github</a>
  <a href="http://fox-hover.co.uk/codepen-challenge-checkboxes" target="_blank" title="Check in Blog"><i class="fa fa-check" aria-hidden="true"></i> Check in Blog</a>
  
  <!-- checkbox #1 form -->
  <form>
    
    <h2>Effect #1</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-1" id="get-up-1" type="checkbox" value="get-up-1" name="get-up-1"/>
    <label for="get-up-1">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-1" id="make-bed-1" type="checkbox" value="make-bed-1" name="make-bed-1"/>
    <label for="make-bed-1">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-1" id="clean-teeth-1" type="checkbox" value="clean-teeth-1" name="clean-teeth-1"/>
    <label for="clean-teeth-1">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-1" id="dress-up-1" type="checkbox" value="dress-up-1" name="dress-up-1"/>
    <label for="dress-up-1">Dress Up</label>
      
    </div>
  </form>
  
  <!-- checkbox #2 form -->
  <form>
    
    <h2>Effect #2</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-2" id="get-up-2" type="checkbox" value="get-up-2" name="get-up-2"/>
    <label for="get-up-2">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-2" id="make-bed-2" type="checkbox" value="make-bed-2" name="make-bed-2"/>
    <label for="make-bed-2">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-2" id="clean-teeth-2" type="checkbox" value="clean-teeth-2" name="clean-teeth-2"/>
    <label for="clean-teeth-2">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-2" id="dress-up-2" type="checkbox" value="dress-up-2" name="dress-up-2"/>
    <label for="dress-up-2">Dress Up</label>
      
    </div>
  </form>
  
  <!-- checkbox #3 form -->
  <form>
    
    <h2>Effect #3</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-3" id="get-up-3" type="checkbox" value="get-up-3" name="get-up-3"/>
    <label for="get-up-3">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-3" id="make-bed-3" type="checkbox" value="make-bed-3" name="make-bed-3"/>
    <label for="make-bed-3">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-3" id="clean-teeth-3" type="checkbox" value="clean-teeth-3" name="clean-teeth-3"/>
    <label for="clean-teeth-3">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-3" id="dress-up-3" type="checkbox" value="dress-up-3" name="dress-up-3"/>
    <label for="dress-up-3">Dress Up</label>
      
    </div>
  </form>
  
  <!-- checkbox #4 form -->
  <form>
    
    <h2>Effect #4</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-4" id="get-up-4" type="checkbox" value="get-up-4" name="get-up-4"/>
    <label for="get-up-4">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-4" id="make-bed-4" type="checkbox" value="make-bed-4" name="make-bed-4"/>
    <label for="make-bed-4">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-4" id="clean-teeth-4" type="checkbox" value="clean-teeth-4" name="clean-teeth-4"/>
    <label for="clean-teeth-4">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-4" id="dress-up-4" type="checkbox" value="dress-up-4" name="dress-up-4"/>
    <label for="dress-up-4">Dress Up</label>
      
    </div>
  </form>
  
  <!-- checkbox #5 form -->
  <form>
    
    <h2>Effect #5</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-5" id="get-up-5" type="checkbox" value="get-up-5" name="get-up-5"/>
    <label for="get-up-5">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-5" id="make-bed-5" type="checkbox" value="make-bed-5" name="make-bed-5"/>
    <label for="make-bed-5">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-5" id="clean-teeth-5" type="checkbox" value="clean-teeth-5" name="clean-teeth-5"/>
    <label for="clean-teeth-5">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-5" id="dress-up-5" type="checkbox" value="dress-up-5" name="dress-up-5"/>
    <label for="dress-up-5">Dress Up</label>
      
    </div>
  </form>
  
  <!-- checkbox #6 form -->
  <form>
    
    <h2>Effect #6</h2>
    
    <div class="checkbox-block">
      
      <!--checkbox 1-->
    <input class="checkbox-effect checkbox-effect-6" id="get-up-6" type="checkbox" value="get-up-6" name="get-up-6"/>
    <label for="get-up-6">Get Up</label>
    
    <!--checkbox 2-->
    <input class="checkbox-effect checkbox-effect-6" id="make-bed-6" type="checkbox" value="make-bed-6" name="make-bed-6"/>
    <label for="make-bed-6">Make a Bed</label>
    
    <!--checkbox 3-->
    <input class="checkbox-effect checkbox-effect-6" id="clean-teeth-6" type="checkbox" value="clean-teeth-6" name="clean-teeth-6"/>
    <label for="clean-teeth-6">Cleen Teeth</label>
    
    <!--checkbox 4-->
    <input class="checkbox-effect checkbox-effect-6" id="dress-up-6" type="checkbox" value="dress-up-6" name="dress-up-6"/>
    <label for="dress-up-6">Dress Up</label>
      
    </div>
  </form>
</div>

//vars
$accent-font-color: #DB324D;
$border-color: #5a5a5a;

$icon-color-1: #fff;
$icon-color-2: #00711b;
$icon-color-3: #FD5200;
$icon-color-4: #72195A;
$icon-color-5: #C42021;

$icon-bg-1: #1B998B;
$icon-bg-2: #275DAD;

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}


/* common styles !!!YOU DON'T NEED THEM */

body {
  font: {
    family: 'Archivo', sans-serif;
    size: 20px;
  }
  color: #5a5a5a;
}

.container {
  width: 800px;
  margin: 50px auto 0px;
  text-align: center;
  
  & > a {
    color: #1f1f1f;
    font: {
      size: 20px;
    }
    display: inline-block;
    margin-top: 20px;
    
    i {
      color: $accent-font-color;
    }

    &:nth-child(2) {

      &:after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border: 2px solid $accent-font-color;
        border-radius: 20px;
        margin: 0px 10px 0px 15px;
        position: relative;
        top: -2px;
      }
    }
  }
}

h1 {
  text-align: center;
  font-size: 25px;
  
  span {
    font: {
      family: 'Satisfy', cursive;
      size: 35px;
    }
    color: $accent-font-color;
    position: relative;
  }
}

form {
  margin-top: 55px;
  
  &:last-child {
    margin-bottom: 55px;
  }
  
  h2 {
    font: {
      size: 20px;
      weight: 700;
    }
    color: #000;
    margin-bottom: 30px;
  }
  
}

/* input styles !!!YOU NEED THEM */

.checkbox-block {
  display: flex;
  justify-content: space-between;
}

.checkbox-effect:not(:checked),
.checkbox-effect:checked{
  position: absolute;
  left: -9999px;
}

label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

/* checkbox effect #1 */

.checkbox-effect-1:not(:checked) + label:before,
.checkbox-effect-1:checked + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid $border-color;
    box-sizing: border-box;
    border-radius: 3px;
    margin-right: 20px;
}

.checkbox-effect-1:not(:checked) + label:after,
.checkbox-effect-1:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 11px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 2px, $top: 0);
  color: $icon-color-1;
  transform-origin: center center;
}

.checkbox-effect-1:not(:checked) + label:after {
  transform: scale(0);
}

.checkbox-effect-1:checked + label:before {
  background-color: $icon-bg-1;
  border-color: $icon-bg-1;
  @include transition-mix;
}

.checkbox-effect-1:checked + label:after {
  transform: scale(1);
  @include transition-mix($delay: 0.2s);
}

/* checkbox effect #2 */
.checkbox-effect-2:not(:checked) + label:before,
.checkbox-effect-2:checked + label:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid $border-color;
  box-sizing: border-box;
  border-radius: 10px;
  margin-right: 20px;
  @include transition-mix($delay: 0.2s);
}

.checkbox-effect-2:not(:checked) + label:after,
.checkbox-effect-2:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 18px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 0px, $top: 0);
  color: $icon-color-2;
}

.checkbox-effect-2:not(:checked) + label:after {
  opacity: 0;
  @include transition-mix;
}

.checkbox-effect-2:checked + label:before {
  opacity: 0;
  @include transition-mix;
}

.checkbox-effect-2:checked + label:after {
  opacity: 1;
  @include transition-mix($delay: 0.2s);
}

/* checkbox effect #3 */
.checkbox-effect-3 + label {
  overflow: hidden;
}

.checkbox-effect-3:not(:checked) + label:before,
.checkbox-effect-3:checked + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid $border-color;
    box-sizing: border-box;
    border-radius: 3px;
    margin-right: 20px;
}

.checkbox-effect-3:not(:checked) + label:after,
.checkbox-effect-3:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 11px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 3px, $top: 0);
  color: $icon-color-3;
  @include transition-mix($timing: cubic-bezier(0, 1.31, 1, 1));
}

.checkbox-effect-3:not(:checked) + label:after {
  left: -52px;
}

.checkbox-effect-3:checked + label:after {
  left: 3px;
}

/* checkbox effect #4 */
.checkbox-effect-4:not(:checked) + label:before,
.checkbox-effect-4:checked + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid $border-color;
    box-sizing: border-box;
    border-radius: 3px;
    margin-right: 20px;
    @include transition-mix($delay: 0.2s);
}

.checkbox-effect-4:not(:checked) + label:after,
.checkbox-effect-4:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 22px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 2px, $top: 0);
  color: $icon-color-4;
  @include transition-mix;
  transform-origin: center center;
  opacity: 0;
}

.checkbox-effect-4:not(:checked) + label:after {
  transform: scale(0);
}

.checkbox-effect-4:checked + label:before {
  transform: scale(0);
  opacity: 0;
  @include transition-mix;
}

.checkbox-effect-4:checked + label:after {
  transform: scale(1);
  opacity: 1;
  @include transition-mix($delay: 0.2s, $timing: cubic-bezier(0.57, 1.9, 0, 1.52));
}

/* checkbox effect #5 */
.checkbox-effect-5:not(:checked) + label:before,
.checkbox-effect-5:checked + label:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid $border-color;
  box-sizing: border-box;
  border-radius: 10px;
  margin-right: 20px;
  transform-origin: center center;
  @include transition-mix;
}

.checkbox-effect-5:not(:checked) + label:after,
.checkbox-effect-5:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 10px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 1px, $top: 0);
  color: $icon-color-1;
}

.checkbox-effect-5:not(:checked) + label:after {
  opacity: 0;
}

.checkbox-effect-5:checked + label:before {
  transform: scale(1.5);
  background-color: $icon-bg-2;
  border-color: $icon-bg-2;
  @include transition-mix($timing: cubic-bezier(0.57, 1.9, 0, 1.52));
}

.checkbox-effect-5:checked + label:after {
  opacity: 1;
  @include transition-mix($delay: 0.2s);
}

/* checkbox effect #6 */
.checkbox-effect-6:not(:checked) + label:before,
.checkbox-effect-6:checked + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid $border-color;
    box-sizing: border-box;
    border-radius: 3px;
    margin-right: 20px;
}

.checkbox-effect-6:not(:checked) + label:after,
.checkbox-effect-6:checked + label:after {
  content: "\f00c";
  font: {
    family: fontawesome;
    size: 21px;
  }
  display: flex;
  height: 100%;
  align-items:center;
  @include position-absolute($left: 1px, $top: -2px);
  color: $icon-color-5;
  text-shadow: 0px -1px 0px #fff;
  transform-origin: center center;
}

.checkbox-effect-6:not(:checked) + label:after {
  transform: scale(1,0);
}

.checkbox-effect-6:checked + label:after {
  transform: scale(1,1);
  @include transition-mix;
}

View Compiled

This Pen is owned by foxeisen on CodePen.

See more by @foxeisen on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.