<div class="tcon-checkbox">
  <input type="checkbox" id="option" aria-checked="false" role="checkbox">
  <label for="option">Label Text</label>
</div>

html,body{height: 100%;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:#F5E5F3;}

$checkbox-style: rounded; // accepts 'rounded' or 'null'
$checkbox-sizing-unit: 6rem; // adjust this value for sizing
$checkbox-height: $checkbox-sizing-unit / 1/4;
$checkbox-position-unit: $checkbox-sizing-unit * 3/4;
$checkbox-speed: 150ms;
$checkbox-off-bg: #E8DFE7;
$checkbox-on-bg: #4fbe79;
$checkbox-btn-bg: #FFFFFD;

.tcon-checkbox {
  height: $checkbox-height;
  position: relative;
  width: $checkbox-sizing-unit;

  input[type=checkbox] {
    opacity: 0;
  }

  input[type=checkbox]:focus ~ label {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.40),
                      1px 1px 1px rgba(255, 255, 255, 0.60);
    background: darken($checkbox-off-bg, 10%);
  }

  input[type=checkbox]:checked ~ label {
    background: $checkbox-on-bg;

    &:after {
      left: $checkbox-position-unit;
    }
  }

  label {
    @if $checkbox-style == rounded {
      border-radius: $checkbox-position-unit;
    }
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.27), 1px 1px 1px rgba(255, 255, 255, 0.71);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: background $checkbox-speed ease-in-out;
    text-indent: -9999em;
    background: $checkbox-off-bg;

    &:hover {
      cursor: pointer;
    }

    &:after {
      @if $checkbox-style == rounded {
        border-radius: $checkbox-position-unit;
      }
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
      content: "";
      cursor: pointer;
      display: block;
      height: $checkbox-position-unit * 1/4;
      position: absolute;
      top: $checkbox-position-unit / 24;
      left: $checkbox-position-unit / 24 * 2;
      width: $checkbox-position-unit * 1/4;
      transition: left $checkbox-speed ease-in-out;
      z-index: 1;
      background: $checkbox-btn-bg;
      background-image:
        radial-gradient(50% 0%, 10% 50%, hsla(0, 0%, 0%,.1) 0%, hsla(0, 0%, 0%, 0) 100%),
        radial-gradient(50% 100%, 10% 50%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%),
        radial-gradient(0% 50%, 50% 10%, hsla(0,0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%),
        radial-gradient(100% 50%, 50% 06%, hsla(0, 0%, 0%,.1) 0%, hsla(0, 0%, 0%, 0) 100%);
    }
  }
}

// See:
// http://www.sitepoint.com/theming-form-elements-sass/