Author: | |
---|---|
Views Total: | 8,387 views |
Official Page: | Go to website |
Last Update: | February 13, 2014 |
License: | MIT |
Preview:

Description:
A toggle button built with HTML5 and CSS3 that converts a checkbox input field to an animated toggle switcher as you seen in iOS. The toggle uses svg for toggle icons so it only works on modern browsers that support Html 5 SVG
element and CSS3 properties.
How to use it:
Markup html structure.
<div class="toggle-btn"> <div class="toggle-round"> <input type="checkbox" name="round-test" id="round-test" /> <label for="round-test"></label> <figure class="icon-unchecked"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" version="1.1" viewBox="0 0 16 16" width="16px"> <g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"> <g fill="#000000" id="Group" transform="translate(-144.000000, -480.000000)"> <path d="M144,480 L160,480 L160,496 L144,496 Z M145,481 L145,495 L159,495 L159,481 Z M145,481" id="Rectangle 152 copy" /> </g> </g> </svg> </figure> <figure class="icon-checked"> <svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"> <title/> <defs/> <g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"> <g fill="#000000" id="Group" transform="translate(0.000000, -432.000000)"> <path d="M0,432 L7,432 L7,439 L0,439 Z M9,432 L16,432 L16,439 L9,439 Z M0,441 L7,441 L7,448 L0,448 Z M9,441 L16,441 L16,448 L9,448 Z M9,441" id="Rectangle 184"/> </g> </g> </svg> </div> </div>
The CSS styles.
.toggle-btn { position: relative; max-width: 200px; height: 50px; height: 50px; line-height: 50px; } .toggle-btn .toggle-round { margin: 0 auto; width: 75%; height: 100%; line-height: 50px; border: 10px solid #FFFFFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .toggle-btn input[type="checkbox"] { position: absolute; left: -2500px; } .toggle-btn label { display: block; position: absolute; width: 100%; height: 100%; cursor: pointer; } .toggle-btn .toggle-round label:before { position: absolute; content: " "; top: 50%; margin-top: -18px; margin-left: 10px; display: inline-block; background: #FFFFFF; width: 36px; height: 36px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: -moz-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); } .toggle-btn input[type="checkbox"]:checked ~ label:before { -webkit-transform: translate3d(95px, 0, 0); -moz-transform: translate3d(95px, 0, 0); transform: translate3d(95px, 0, 0); } .toggle-btn figure { position: absolute; top: 50%; margin-top: 2px; } .toggle-btn figure g { -webkit-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000); } .toggle-btn figure.icon-unchecked { left: -65px; } .toggle-btn figure.icon-checked { right: -65px; } .toggle-btn figure.icon-unchecked g { fill: rgba(0,0,0, 0.5); } .toggle-btn figure.icon-checked g { fill: #FFFFFF; } .toggle-btn input[type="checkbox"]:checked ~ figure.icon-unchecked g { fill: #FFFFFF; } .toggle-btn input[type="checkbox"]:checked ~ figure.icon-checked g { fill: rgba(0,0,0, 0.5); }