Hii,
 In this blog, I am going to  share an example in which i have created a pure CSS Flip Flop button using few CSS properties like transitions, transforms, checkbox functionality and animations.
Flip flop buttons created using Pure CSS can be very useful as it is very light weighted,easy to implement. 

If you are asked to create a FlipFlop design, no doubt you will prefer to use some scripting language like javascript or jquery too.

No doubt you can create it using any scripting language but if you want to learn how to create it using simple CSS properties then go though the example below.

FlipFlop button created using images
 

CSS:

.switch {position: relative;display: block;vertical-align: top;width: 100px;height: 30px;padding: 3px;
margin: 0 10px 10px 0;cursor: pointer;}
.switch-input {position: absolute;top: 0;left: 0;opacity: 0;}
.switch-label {position: relative;display: block;background-image: url(off.jpg);width:500px;height:411px;}
.switch-input:checked ~ .switch-label {background-image: url("on.jpg");width:500px;height:411px;}

HTML:

<label class="switch">
   <input class="switch-input" type="checkbox" />
   <span class="switch-label" data-on="On" data-off="Off"></span>
</label>

FlipFlop button created without using any image
 

CSS:

.switch {
   position: relative;
   display: block;
   vertical-align: top;
   width: 100px;
   height: 30px;
   padding: 3px;
   margin: 0 10px 10px 0;
   background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
   background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
   border-radius: 18px;
   box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
   cursor: pointer;
  }
  .switch-input {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
  }
  .switch-label {
   position: relative;
   display: block;
   height: inherit;
   font-size: 10px;
   text-transform: uppercase;
   background: #777779;
   color:#000;
   border-radius: inherit;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  }
  .switch-label:before, .switch-label:after {
   position: absolute;
   top: 50%;
   margin-top: -.5em;
   line-height: 1;
   -webkit-transition: inherit;
   -moz-transition: inherit;
   -o-transition: inherit;
   transition: inherit;
  }
  .switch-label:before {
   content: attr(data-off);
   right: 11px;
   color: #000;
   text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  }
  .switch-label:after {
   content: attr(data-on);
   left: 11px;
   color: #000;
   text-shadow: 0 1px rgba(0, 0, 0, 0.2);
   opacity: 0;
  }
  .switch-input:checked ~ .switch-label {
   background: #037CD5;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
  }
  .switch-input:checked ~ .switch-label:before {
   opacity: 0;
  }
  .switch-input:checked ~ .switch-label:after {
   opacity: 1;
  }
  .switch-handle {
   position: absolute;
   top: 4px;
   left: 4px;
   width: 28px;
   height: 28px;
   background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
   background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
   border-radius: 100%;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  }
  .switch-handle:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -6px 0 0 -6px;
   width: 12px;
   height: 12px;
   background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
   background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
   border-radius: 6px;
   box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
  }
  .switch-input:checked ~ .switch-handle {
   left: 74px;
   box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Transition
  ========================== */
  .switch-label, .switch-handle {
   transition: All 0.3s ease;
   -webkit-transition: All 0.3s ease;
   -moz-transition: All 0.3s ease;
   -o-transition: All 0.3s ease;
  }

HTML:

<label class="switch">
   <input class="switch-input" type="checkbox" />
   <span class="switch-label" data-on="On" data-off="Off"></span>
   <span class="switch-handle"></span>
  </label>