Pure CSS3 Toggle Switch

Developer
Andy McFee
Size
3,475 Kb
Views
36,432
  1. Pure CSS3 Toggle Switch Previews
  2. Pure CSS3 Toggle Switch HTML Codes
  3. Pure CSS3 Toggle Switch CSS Codes

How do I make an pure css3 toggle switch?

What is a pure css3 toggle switch? How do you make a pure css3 toggle switch? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

Pure CSS3 Toggle Switch Previews
IQ Test

Pure CSS3 Toggle Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Toggle Switch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Pure CSS3 Toggle Switch</h1>
<input type="checkbox" id="1" class="slider-toggle" />
<label class="slider-viewport" for="1"> <div class="slider"> <div class="slider-button">&nbsp;</div> <div class="slider-content left"><span>On</span></div> <div class="slider-content right"><span>Off</span></div> </div>
</label>
<h3>Or: a pure CSS alternative to checkboxes</h3>
<div class="look"> <input type="checkbox" id="2" class="slider-toggle" /> <label class="slider-viewport" for="2"> <div class="slider"> <div class="slider-button">&nbsp;</div> <div class="slider-content left"><span>On</span></div> <div class="slider-content right"><span>OFF</span></div> </div> </label>
</div>
<h3>A look behind the curtain...</h3>
</body>
</html>

Pure CSS3 Toggle Switch - Script Codes CSS Codes

/* CSS Toggle Switch by Andy McFee
*/
body{ background: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: white;
}
h1 { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px; color: rgba(255, 255, 255, 0.6); margin-top: 50px; text-align: center; }
h3 { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px; width: 100%; text-align: center; color: rgba(255, 255, 255, 0.35); font-size: 16px; font-weight: normal; }
.slider-toggle { display: none; visibility: none; }
.slider-button,
.slider-content,
.slider { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
.slider-viewport { /* Uncomment the border-radius and border declaration to see the webkit bug in Chrome or Safari */ /* border-radius: 50px; border: 5px solid green; */ -moz-border-radius: 50px; display: block; height: 100px; overflow: hidden; width: 300px; position: relative; margin: 30px auto 0; cursor: pointer; }
.slider { height: 100%; position: relative; width: 200%; }
.slider-button { -moz-border-radius: 50px; background-color: #f2f2f2; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFF2F2F2', endColorstr='#FFDDDDDD'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iODYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiLz48c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZTJlMmUyIi8+PHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(radial, 50%, 0, 50%, 86, color-stop(0%, #f2f2f2), color-stop(32%, #eeeeee), color-stop(61%, #e2e2e2), color-stop(86%, #dddddd)); background-image: -webkit-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%); background-image: -moz-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%); background-image: -o-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%); background-image: -ms-radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%); background-image: radial-gradient(center, ellipse cover, #f2f2f2 0%, #eeeeee 32%, #e2e2e2 61%, #dddddd 86%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px; -moz-box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px; box-shadow: white 0 10px 8px inset, rgba(0, 0, 0, 0.4) 0 -5px 8px inset, rgba(0, 0, 0, 0.2) 0 0 5px; position: absolute; display: block; top: 0; height: 100px; width: 100px; cursor: pointer; }
.slider-content { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset; box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset; background: rgba(157, 38, 29, 0.5); cursor: pointer; display: inline-block; float: left; height: 100%; width: 250px; font-size: 50px; font-weight: bold; text-transform: uppercase; top: 10px; } .slider-content span { text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px; height: 100%; line-height: 100px; margin: 0 20px; float: left; }
.left { background-color: #59bdff; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF59BDFF', endColorstr='#FF44B7FF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5YmRmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0YjdmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #59bdff), color-stop(100%, #44b7ff)); background-image: -webkit-linear-gradient(top, #59bdff 0%, #44b7ff 100%); background-image: -moz-linear-gradient(top, #59bdff 0%, #44b7ff 100%); background-image: -o-linear-gradient(top, #59bdff 0%, #44b7ff 100%); background-image: -ms-linear-gradient(top, #59bdff 0%, #44b7ff 100%); background-image: linear-gradient(top, #59bdff 0%, #44b7ff 100%); }
.right { background-color: #ff4f51; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF4F51', endColorstr='#FFFF3A3A'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNGY1MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmM2EzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff4f51), color-stop(100%, #ff3a3a)); background-image: -webkit-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); background-image: -moz-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); background-image: -o-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); background-image: -ms-linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); background-image: linear-gradient(top, #ff4f51 0%, #ff3a3a 100%); } .right span { float: right; }
.slider-toggle + .slider-viewport > .slider { left: 0; }
.slider-toggle + .slider-viewport .slider-button { left: 200px; }
.slider-toggle + .slider-viewport .slider-content { width: 250px; }
.slider-toggle + .slider-viewport .left { margin-left: 0; }
.slider-toggle:checked + .slider-viewport > .slider { left: -100%; }
.slider-toggle:checked + .slider-viewport .slider-button { left: 300px; }
.slider-toggle:checked + .slider-viewport .left { margin-left: 100px; }
.look .slider-toggle { display: block; margin: 30px auto 0; }
.look .slider-viewport { margin-top: 10px; border: 4px solid orange; overflow: visible; }
.look .slider-content { opacity: .6; }
/* Checkout my related blog post:
http://andymcfee.com/2012/05/css3-toggle-switch-a-ui-alternative-to-checkboxes/*/
Pure CSS3 Toggle Switch - Script Codes
Pure CSS3 Toggle Switch - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 4.5
Size 3,475 Kb
Views 36,432
Do you need developer help for Pure CSS3 Toggle Switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy McFee (andymcfee) Script Codes
Name
Flip Card
Flip Card - Bad Rotation
Page Transitions - Vertical Sliding
Calculator
Flexbox vertcially centered nav text
Whatsizeisthisscreen.com
Round Music Player with Official.fm API
Responsive Boxes with CSS3 Columns
Single-page app layout with animating transitions
BEM Flexbox Nav build for a workshop
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!