Author: | designcouch |
---|---|
Views Total: | 19,409 views |
Official Page: | Go to website |
Last Update: | July 28, 2014 |
License: | MIT |
Preview:

Description:
A pure CSS solution to create animated iOS 7 style switches with labels using CSS3 box-shadow
and transition
properties.
How to use it:
Create a regular checkbox that will be converted into a iOS 7 style switch button.
<input type="checkbox" name="checkbox1" id="checkbox1" class="ios-toggle" checked/> <label for="checkbox1" class="checkbox-label" data-off="off" data-on="on"></label>
The core CSS styles.
.ios-toggle, .ios-toggle:active { position: absolute; top: -5000px; height: 0; width: 0; opacity: 0; border: none; outline: none; } .checkbox-label { display: block; position: relative; padding: 10px; margin-bottom: 20px; font-size: 12px; line-height: 16px; width: 100%; height: 36px; /*border-radius*/ -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; background: #f8f8f8; cursor: pointer; } .checkbox-label:before { content: ''; display: block; position: absolute; z-index: 1; line-height: 34px; text-indent: 40px; height: 36px; width: 36px; /*border-radius*/ -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; top: 0px; left: 0px; right: auto; background: white; /*box-shadow*/ -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd; -moz-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd; box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd; } .checkbox-label:after { content: attr(data-off); display: block; position: absolute; z-index: 0; top: 0; left: -300px; padding: 10px; height: 100%; width: 300px; text-align: right; color: #bfbfbf; white-space: nowrap; } .ios-toggle:checked + .checkbox-label { /*box-shadow*/ -webkit-box-shadow: inset 0 0 0 20px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); -moz-box-shadow: inset 0 0 0 20px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); box-shadow: inset 0 0 0 20px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); } .ios-toggle:checked + .checkbox-label:before { left: calc(100% - 36px); /*box-shadow*/ -webkit-box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0,0,0,.3); -moz-box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0,0,0,.3); box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0,0,0,.3); } .ios-toggle:checked + .checkbox-label:after { content: attr(data-on); left: 60px; width: 36px; }
Add the custom CSS to style the switch button whatever you like.
#checkbox1 + .checkbox-label { /*box-shadow*/ -webkit-box-shadow: inset 0 0 0 0px rgba(19,191,17,1), 0 0 0 2px #dddddd; -moz-box-shadow: inset 0 0 0 0px rgba(19,191,17,1), 0 0 0 2px #dddddd; box-shadow: inset 0 0 0 0px rgba(19,191,17,1), 0 0 0 2px #dddddd; } #checkbox1:checked + .checkbox-label { /*box-shadow*/ -webkit-box-shadow: inset 0 0 0 18px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); -moz-box-shadow: inset 0 0 0 18px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); box-shadow: inset 0 0 0 18px rgba(19,191,17,1), 0 0 0 2px rgba(19,191,17,1); } #checkbox1:checked + .checkbox-label:after { color: rgba(19,191,17,1); }