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 ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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>
|
