benjamincharity
8/22/2013 - 12:34 PM

A slick CSS3 toggle to replace a checkbox.

A slick CSS3 toggle to replace a checkbox.

screen.scss
content_copyfile_download
@import "compass";
@import "reset";


///////////////////////////////
//
// Setup
//
///////////////////////////////

$green      : #90C396;
$red        : #D28282;
$gray       : #979797;
$white      : #F0F0F0;
$bg-gray    : #D8D8D8;

@mixin customTransition($property: all, $timing: 300ms) {
  -webkit-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition:    $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -ms-transition:     $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -o-transition:      $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition:         $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
}


html {
  background-color: #ccc;
}

.demo {
  background-color: $bg-gray;
  border: 1px solid darken($bg-gray, 10%);
  height: 200px;
  margin: 20% auto;
  width: 400px;
}




///////////////////////////////
//
// Toggle
//
///////////////////////////////

%toggle-pseudo {
  background-color: $green;
  content: "";
  display: block;
  height: 23px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  @include customTransition();
  @include transform-origin(center, center);
}

.toggle {
  border: 1px solid $gray;
  border-radius: 40px;
  cursor: pointer;
  height: 40px;
  margin: 20% auto;
  position: relative;
  width: 86px;

  &.is_off {
    .toggle__handle {
      left: 2.9em;
      @include rotate(94deg);

      &::before {
        background-color: $red;
        height: 23px;
        // this is margin-top in this rotation
        margin-left: -3px;
        // this is margin-right in this rotation
        margin-top: -12px;
        //opacity: 0.7;
      }

      &::after {
        background-color: $red;
        // this is margin-top in this rotation
        margin-left: -3px;
        // this is margin-right in this rotation
        margin-top: -12px;
        //opacity: 0.7;
      }
    }
  }
}

.toggle__handle {
  background-color: $white;
  border: 1px solid $gray;
  border-radius: 100%;
  display: block;
  position: absolute;
  left: 1px;
  top: 1px;
  height: 36px;
  @include customTransition();
  width: 36px;

  &::before {
    @extend %toggle-pseudo;
    @include transform(rotate(-50deg));
    height: 12px;
    margin-left: -10.3px;
    margin-top: -2px;
  }

  &::after {
    @extend %toggle-pseudo;
    @include transform(rotate(40deg));
    margin-left: 0;
    margin-top: -10px;
  }
}
demo.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Demo</title>

  <link rel="stylesheet" href="css/screen.css">
</head>
<body>

  <div class="demo">
    <div class="toggle">
      <span class="toggle__handle"></span>
    </div>
  </div>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $('.toggle').on('click', function() {
        $(this).toggleClass( 'is_off' )
      });
    });
  </script>
</body>
</html>