index.html

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

script.js

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

style.less

@background: #1C1D1F;
@button:     #1C1D1F;
@light-on:   #93C913;
@light-off:  #FF4847;

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

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

body {
  background-color: @background;
}

.button {
  display: block;
  width: 400px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
  background-color: darken(@button, 50%);
  box-shadow: 0 -1px 0 fade(white, 20%) inset;
  border-radius: 20px;
  overflow: hidden; 
  cursor: pointer;  
  -webkit-tap-highlight-color: fade(black, 0%);
  
  span {
    display: block;
    position: absolute;
    top: 6px;
    width: 194px;
    height: 108px;
    background-color: @button;
    transition:
      transform 300ms ease,
      box-shadow 300ms ease;
    
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Open Sans";
      font-weight: 800;
      font-size: 48px;
      transition:
        text-shadow 800ms ease 100ms,
        color 800ms ease 100ms;
    }
    
    &:after {
      content: "";
      width: 4px;
      height: 108px;
      position: absolute;
      top: 0;     
      background: radial-gradient(ellipse at center, fade(white, 50%) 0%, transparent 50%);
      transition: opacity 300ms ease;
    }  
    
    &:first-of-type {
      left: 6px;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      transform-style: preserve3d;
      transform-origin: right center;
      transform:
        perspective(2000px)
        rotateY(40deg);
      box-shadow:
        -1px 0 1px fade(white, 10%) inset,
        4px 0 8px fade(white, 10%) inset,
        1px 0 0 fade(white, 10%) inset,
        -10px 0 8px fade(lighten(@button, 5%), 90%),
        -20px 0 8px fade(@button, 70%),
        -30px 0 8px fade(@button, 40%);
      
      &:before {
        content: "ON";
        color: fade(black, 50%);
        text-shadow:
          1px 4px 6px @button,
          0 0 0 black,
          1px 4px 6px @button;
      }
      
      &:after {
        left: -1px;
      }
    }
    
    &:last-of-type {
      right: 6px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      transform-origin: left center;
      box-shadow:
        -1px 1px 1px fade(white, 10%) inset,
        2px 0 2px fade(white, 5%) inset;
      
      &:before {
        content: "OFF";
        color: @light-off;
        text-shadow: 0 0 24px fade(@light-off, 60%);
      }
      
      &:after {
        right: -1px;
        opacity: 0;
      }
    }
  }
  
  input[type="checkbox"] {
    display: none;

    &:checked ~ span {

      &:first-of-type {
        transform: none;
        box-shadow:
          1px 1px 1px fade(white, 10%) inset,
          -2px 0 2px fade(white, 5%) inset;
              
        &:before {
          color: @light-on;
          text-shadow: 0 0 24px fade(@light-on, 60%);
        }
        
        &:after {
          opacity: 0;
        }     
      }

      &:last-of-type {
        transform:
          perspective(2000px)
          rotateY(-40deg);
        box-shadow:
          1px 0 1px fade(white, 10%) inset,
          -4px 0 8px fade(white, 10%) inset,
          -1px 0 0 fade(white, 10%) inset,
          10px 0 8px fade(lighten(@button, 5%), 90%),
          20px 0 8px fade(@button, 70%),
          30px 0 8px fade(@button, 40%);
                
        &:before {
          color: fade(black, 50%);
          text-shadow:
            1px 4px 6px @button,
            0 0 0 #000,
            1px 4px 6px @button;
        }
          
        &:after {
          opacity: 1;
        }
      }
    }
  }
}

Switch-Button-#2.markdown

Switch Button #2

Another switch button made entirely with CSS. Works better with Google Chrome. Inspired by http://dribbble.com/shots/343597-Switch-button

A Pen by Cainã Maturo on CodePen.

License.