index.html

<label class="button">
  <input type="checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>

script.js

// Where's the JS? ¯\_(ツ)_/¯

style.less

@background: #2C3E50;
@button:     #2C3E50;
@light-on:   #2ecc71;
@light-off:  #C0392B;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

*,
*:before,
*:after {
  box-sizing: border-box
}

body {
  background-color: @background;
}

.button {
  display: block;
  position: absolute;
  width: 240px;
  height: 80px;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, darken(@button, 15%) 0%, darken(@button, 12%) 100%);
  border-radius: 40px;
  box-shadow: 0 0 0 1px fade(white, 10%);
  cursor: pointer;
  -webkit-tap-highlight-color: fade(black, 0%);
  
  span {
    position: absolute;
    display: block;
    
    &:first-of-type {
      z-index: 100;
      top: 4px;
      right: 4px;    
      width: 160px;
      height: 72px;
      background: linear-gradient(to bottom, @button 0%, darken(@button, 8%) 100%);
      box-shadow:
        0 6px 4px fade(white, 10%) inset,
        0 2px 0px fade(white, 20%) inset,
        0 -6px 0px fade(black, 20%) inset,
        0 -2px 0px fade(black, 20%) inset,
        0 2px 2px fade(black, 40%),
        -4px 2px 8px fade(black, 40%),
        2px 0 1px fade(lighten(@light-off, 40%), 50%) inset;
      border-radius: 36px;
      transition:
        right 400ms cubic-bezier(1, 0, 0, 1),
        box-shadow 400ms ease;
    }
  
     &:nth-last-of-type(-n+2) {
       z-index: 10;
       top: 4px;
       width: 116px;
       height: 72px;
       transition: opacity 800ms ease 100ms;
       
       &:after {
        position: absolute;
        top: 26px;
        line-height: 1;
        font-family: "Open Sans";
        font-weight: 800;
        font-size: 24px;
        color: white;
        text-shadow:
          0 1px 2px fade(black, 20%),
          0 0 20px white;
      }
    }
    
    &:nth-of-type(2) {
      left: 4px;
      background: linear-gradient(to bottom, @light-off 0%, lighten(@light-off, 10%) 100%);
      border-top-left-radius: 36px;
      border-bottom-left-radius: 36px;
      box-shadow:
        4px 4px 12px 4px fade(black, 50%) inset,
        0 -2px 8px fade(black, 40%) inset;
      
      &:after {
        content: "OFF";
        left: 18px;
      }
    }
      
    &:last-of-type {
      right: 4px;
      background: linear-gradient(to bottom, @light-on 0%, lighten(@light-on, 20%) 100%);
      border-top-right-radius: 36px;
      border-bottom-right-radius: 36px;
      box-shadow:
        -4px 4px 12px 4px fade(black, 50%) inset,
        0 -2px 8px fade(black, 40%) inset;
      opacity: 0.2;
      
      &:after {
        content: "ON";
        right: 22px;
      }
    }    
  }
  
  input[type="checkbox"] {
    display: none;

    &:checked ~ span {

      &:first-of-type {
        right: 76px;
        box-shadow:
          0 6px 4px fade(white, 10%) inset,
          0 2px 0px fade(white, 20%) inset,
          0 -6px 0px fade(black, 20%) inset,
          0 -2px 0px fade(black, 20%) inset,
          0 2px 2px fade(black, 40%),
          4px 2px 8px fade(black, 40%),
          -2px 0 1px fade(lighten(@light-on, 40%), 50%) inset;
      }
                
      &:nth-of-type(2) {
        opacity: 0.2;
      }

      &:last-of-type {
        opacity: 1;
      }
    }
  }
}

Switch-Button-#1.markdown

Switch Button #1

A switch button made only with CSS. Works better with Google Chrome. Inspired by http://dribbble.com/shots/1046001-Switch

A Pen by Cainã Maturo on CodePen.

License.