Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create a FlipFlop button using Pure CSS

    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 349
    Comment on it

    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>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: