Pure CSS Animated Checkbox

index.html

 <div class="exp">
   <div class="checkbox">
    <form>
      <div id="box1" class="box">
        <input type="checkbox" id="check1" name="check" value="1" />
        <label for="check1">
          <span><!-- This span is needed to create the "checkbox" element --></span>Checkbox1
        </label>
      </div >
            <div id="box2" class="box">
        <input type="checkbox" id="check2" name="check" value="2" />
        <label for="check2">
          <span><!-- This span is needed to create the "checkbox" element --></span>Checkbox2
        </label>
      </div>
            <div id="box3" class="box">
        <input type="checkbox" id="check3" name="check" value="3" />
        <label for="check3" >
          <span><!-- This span is needed to create the "checkbox" element --></span>Checkbox3
        </label>
      </div>
    </form>
</div>

pure-css-animated-checkbox.markdown

Pure CSS Animated Checkbox

A pure html/css animated checkbox created for the audience of North of Rapture blog. http://northofrapture.com

A Pen by sunshine on CodePen.

License.

style.scss

html {
  height: 100%; // for styling only
}

body {
  background-color: #1790b5; // for styling only
  height: 100%; // for styling only
  font-family: 'Open Sans', sans-serif;
}

.exp {
  display: table; // to center the item
  width: 100%;
  height: 100%;
  
  .checkbox {
    display: table-cell; // to center the item
    width: 100%;
    height: 100%;
    vertical-align: middle; // to center the item
    text-align: center; // to center the item
  }
}

label {
    display: inline-block; // to make it easier to click
    color: #fff;
    cursor: pointer;
    position: relative; // important
  
    // Now we'll create the checkbox object
  
    span {
      display: inline-block;
      position: relative;
      background-color: transparent;
      width: 25px;
      height: 25px;
      transform-origin: center;
      border: 2px solid #fff;
      border-radius: 50%;
      vertical-align: -6px;
      margin-right: 10px;
      transition: background-color 150ms 200ms, transform 350ms cubic-bezier(.78,-1.22,.17,1.89); // custom ease effect for bouncy animation
  
  // Now we'll create the "tick" using pseudo elements - those will be basically two lines that will be rotated to form the "tick"
  
    &:before {
      content: "";
      width: 0px;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(45deg);
      top: 13px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 9px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease 50ms;
      transform-origin: 0% 0%;
    }
  
    &:after {
      content: "";
      width: 0;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(305deg);
      top: 16px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 10px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease;
      transform-origin: 0% 0%;
    }
  }
  // Time to add some life to it
  
  &:hover {
    span {
      &:before {
        width: 5px;
        transition: width 100ms ease;
      }
      
      &:after {
        width: 10px;
        transition: width 150ms ease 100ms;
      }
    }
  }
}

input[type="checkbox"] {
    display: none; // hide the system checkbox
  
  // Let's add some effects after the checkbox is checked
  
  &:checked {
    + label {
      span {
        background-color: #fff;
        transform: scale(1.25); // enlarge the box
        
        &:after {
          width: 10px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }
        
        &:before {
          width: 5px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }
      }
      
      &:hover { // copy the states for onMouseOver to avoid flickering
        span {
          background-color: #fff;
          transform: scale(1.25); // enlarge the box

          &:after {
            width: 10px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }

          &:before {
            width: 5px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }
        }  
      }
    }
  }
}

.box{
  margin-bottom: 15px;
}

#box1{
  label {
    color: red;
    span {
      border: 2px solid red; 
    &:before {
      background: red;
    }
    &:after {
      background: red;
    }
  }
}

  input[type="checkbox"] { 
    &:checked {
      + label {
        span {
          background-color: red;
          &:after {
          background: #1790b5;
          }
        
          &:before {
            background: #1790b5;
          }
        }
        &:hover {
          span {
            background-color: red;
            &:after {
              background: #1790b5;
            }
            &:before {
              background: #1790b5;
            }
          }  
        }
      }
    }
  }
}

#box2{
  label {
    color: green;
    span {
      border: 2px solid green; 
    &:before {
      background: green;
    }
    &:after {
      background: green;
    }
  }
}

  input[type="checkbox"] { 
    &:checked {
      + label {
        span {
          background-color: green;
                    &:after {
          background: #1790b5;
          }
        
          &:before {
            background: #1790b5;
          }
        }
        &:hover {
          span {
            background-color: green;
            &:after {
              background: #1790b5;
            }
            &:before {
              background: #1790b5;
            }
          }  
        }
      }
    }
  }
}

#box3{
  label {
    color: yellow;
    span {
      border: 2px solid yellow; 
    &:before {
      background: yellow;
    }
    &:after {
      background: yellow;
    }
  }
}

  input[type="checkbox"] { 
    &:checked {
      + label {
        span {
          background-color: yellow;
                    &:after {
          background: #1790b5;
          }
        
          &:before {
            background: #1790b5;
          }
        }
        &:hover {
          span {
            background-color: yellow;
            &:after {
              background: #1790b5;
            }
            &:before {
              background: #1790b5;
            }
          }  
        }
      }
    }
  }
}