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 Retro Toggle Switch Button


Code Snippet </> Info


Snippet Name: CSS3 Retro Toggle Switch Button

Description: Add this retro toggle switch button to your page and your visitors will definitely notice it!
Example: View Code Demo


Download: Get Audio File

Note:

Author: Yair Even-Or

Last Modified: 2015-08-26 21:39:00

Language: css

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 Retro Toggle Switch Button</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 Retro Toggle Switch Button */ /* == 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 == */ *{ margin:0; padding:0; } html, body{ height:100%; } body{ font:15px/1 arial; text-align:center; background:#509DAD; color:#fff;} body:before{ content:''; display:inline-block; height:100%; vertical-align:middle; } fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; } .legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); } .legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; } .checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; } /*------- Horizontal power swtich ---------*/ .checkboxControl{ border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597; box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset, -8px 0 5px -5px #02425C inset; -moz-user-select:none; -webkit-user-select:none; background:#80DCE9; } .checkboxControl input{ position:absolute; visibility:hidden; } .checkboxControl > div{ background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%); background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%); box-shadow:-2px 0 1px 0 #A6F2FE inset; border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5); transform-origin:0 0; -webkit-transform-origin:0 0; transform:scaleX(0.93); -webkit-transform:scaleX(0.93); transition:.1s; -webkit-transition:0.1s; } .checkboxControl div:first-letter{ letter-spacing:55px; } .checkboxControl :checked ~ div{ transform-origin:100% 0; -webkit-transform-origin:100% 0; box-shadow:2px 0 1px 0 #A6F2FE inset; background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%); background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%); } /* bottom shadow of 'upper' side of the button */ .checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; } .checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); } /* the light indicator to the right of the button */ .checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; } .checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; } .checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; } /*------- Vertical power swtich ---------*/ .checkboxControl2{ border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold; width:60px; height:100px; position:relative; margin:0 5px; color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4); } .checkboxControl2 input{ position:absolute; visibility:hidden; } .checkboxControl2 > div{ background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5); } .checkboxControl2 > div:after{ content:'&#927;'; display:block; height:50%; line-height:4; transform-origin:0 0; -webkit-transform-origin:0 0 } .checkboxControl2 > div:before{ content:'&#921;'; display:block; height:50%; line-height:2.5; border-radius:80%/5px; box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8); transform-origin:0 100%; -webkit-transform-origin:0 100%; transform:scaleY(0.7); -webkit-transform:scaleY(0.7) } .checkboxControl2 :checked ~ div{ background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); } .checkboxControl2 :checked ~ div:before{ border-radius:0; box-shadow:none; transform:none; -webkit-transform:none; } .checkboxControl2 :checked ~ div:after{ border-radius:80%/5px; box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC; transform:scaleY(0.7); -webkit-transform:scaleY(0.7); } /* the light indicator to the top of the button */ .checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; } .checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; } .checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; } </style> <script> <!-- add your own onclick audio file path or remove the file path ' >> audio/toggle_click.mp3 << ' --> var snd = new Audio('audio/toggle_click.mp3'); // delegated event on inputs of checkboxControl document.addEventListener('change', function(e){ if(e.target.parentNode.className.indexOf('checkboxControl') != -1){ snd.currentTime = 0; snd.play(); } }); </script> </head> <body onload="_l='t';"> <fieldset> <div class='legend'><span>power switchs</span></div> <div class='checkboxGroup'> <label class='checkboxControl'> <input type='checkbox' /> <div>&#927;&#921;</div><b></b> <span class='indicator'></span> </label> <label class='checkboxControl'> <input type='checkbox' /> <div>&#927;&#921;</div><b></b> <span class='indicator'></span> </label> </div> <label class='checkboxControl2'> <input type='checkbox' /> <div></div> <span class='indicator'></span> </label> <label class='checkboxControl2'> <input type='checkbox' /> <div></div> <span class='indicator'></span> </label> </fieldset> <p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_218.html">Pure HTML5 CSS3 Retro Toggle Switch Button Code Snippet</a> page. ]</p> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library