A Pen by Carlos Perez.

index.html

<form>
  <input type="checkbox" id="switch" class="switch-control">
  <label for="switch">Notifications</label>
</form>

style.less

/* Other Styling */

@import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css);
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);


*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
  font-family: "Lato", "Helvetica Neue", sans-serif;
  margin: 10rem;
  font-size: 1rem;
  font-weight: 400;
  color: #5F6062;
}

form {
  width: 80%;
  margin: 0 auto;
  background-color: #f6f6f6;
  padding: 1rem;
  border-radius: 3px;
  
  &:before { 
   content: ''; 
   display: block; 
  }

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Toggle Switch */

input[type='checkbox'].switch-control {
  margin-left: -9999px;
  position: absolute;

  & ~ label {
    float: left;
    width: 100%;
    position: relative;
    line-height: 1.75rem;
    margin: 0.2rem 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;

    &:before, &:after {
      right: 0;
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      content: ' ';
      width: 3.75rem;
      background-color: #C41230;
      border-radius: 3px;
      transition: all 100ms ease-in;
      background-size: 20px 9px;
    }

    &:before {
      border: 1px solid #CFD4D8;
      content: 'OFF';
      text-align: left;
      text-indent: 2.15rem;
      line-height: 3;
      color: #fff;
      font-size: .5rem;
      font-weight: 900;
    }

    &:after {
      right: 1.8rem;
      width: 1.75rem;
      top: 0.2rem;
      bottom: 0.25rem;
      margin-left: 0.2rem;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 0 .1rem 0 rgba(0,0,0,0.3);
      border: 1px solid #A7A9AC;
      content: '...';
      color: #5F6062;
      font-weight: 900;
      line-height: .7;
      text-align: center;
      font-size: .95rem;
    }
  }

  &:checked {

    & ~ label:before {
      background-color: #8BC300;
      content: 'ON';
      text-indent: .5rem;
      text-align: left;
    }

    & ~ label:after {
      right: .2rem;
    }
  }
}

Toggle-Switch.markdown

Toggle Switch

A nice and clean toggle switch that relies only on CSS. I used the techniques found here: http://www.sitepoint.com/css3-toggle-switch/

A Pen by Carlos Perez on CodePen.

License.