Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Buttons >> CSS3 iOS5 Toggle Buttons


Code Snippet </> Info


Snippet Name: CSS3 iOS5 Toggle Buttons

Description: Do you like the buttons on the iPhone iOS-5? They are so cool, with their round trigger instead of the blocky older style. Introducing the iOS5 toggle buttons made with CSS3!
Example: View Code Demo

Note:

Author: Yair Even-Or

Last Modified: 2015-08-26 21:37:38

Language: cs

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Pure HTML5 CSS3 iOS5 Toggle Buttons</title> <meta name="google" value="notranslate"> <script style="display: none !important;"> window.alert = function(){}; window.confirm = function(){}; window.prompt = function(){}; window.open = function(){}; window.print = function(){}; </script> <style> /* Begin Pure HTML5 CSS3 iOS5 Toggle Buttons */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Yair Even-Or : http://dropthebit.com/ : Creative Commons License == */ html{ height:100%; } body{ font:14px/1 Arial; text-align:center; color:#333; background-color:#EEE; height:100%; background:#DDD; } body::after{ content:''; display:inline-block; height:100%; vertical-align:middle; } *{ margin:0; padding:0; } ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left; vertical-align:middle; } ul li{ line-height:30px; overflow:hidden; padding:4px 0; } ul li label{ float:left; font-weight:bold; } ul li .togglebox{ float:right; } /* Actual code goes here */ .togglebox input{ display:none; } .togglebox{ display:inline-block; border:1px solid #BBB; width:90px; height:30px; position:relative; border-radius:20px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; } .togglebox label{ width:200%; height:100%; line-height:30px; border-radius:0.4em; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:0.12s; -moz-transition:0.12s; transition:0.12s; } .togglebox span{ position:absolute; right:-100px; } .togglebox label::before{ content:'ON'; width:62px; float:left; margin-right:-16px; padding-right:13px; text-align:center; background:#007FEA; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; } .togglebox label b{ display:block; height:100%; width:30px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:20px; } .togglebox label:hover b{ background:#E5E5E5; } .togglebox label::after{ content:'OFF'; width:62px; float:left; margin-left:-15px; padding-left:13px; text-align:center; color:#999; background:#FFF; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; } .togglebox input:checked ~ label{ left:-60px; } </style> </head> <body onload="_l='t';"> <ul> <li> <label for='chkbx'>Firefox is the best</label> <div class='togglebox'> <input type='checkbox' id='chkbx'> <label for='chkbx'><b></b></label> </div> </li> <li> <label for='chkbx2'>Click this text</label> <div class='togglebox'> <input type='checkbox' id='chkbx2' checked='false'> <label for='chkbx2'><b></b></label> </div> </li> <li> <label for='chkbx3'>CSS3 is awesome</label> <div class='togglebox'> <input type='checkbox' id='chkbx3'> <label for='chkbx3'><b></b></label> </div> </li> </ul> <p>[ This code example from ?<a href="http://snapbuilder.com/code_snippets/copy_code_snippet_220.html">Pure HTML5 CSS3 iOS5 Toggle Buttons Code Snippet</a> page. ]</p> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library