Pure CSS Minimal Toggle Button
How do I make an pure css minimal toggle button?
What is a pure css minimal toggle button? How do you make a pure css minimal toggle button? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.
Pure CSS Minimal Toggle Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Minimal Toggle Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="switch"> <input type="checkbox" id="toggle"> <label for="toggle"></label>
</div>
</body>
</html>
Pure CSS Minimal Toggle Button - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: #eee;
}
.switch { height: 200px; width: 200px; background: #eee; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /*@include box-shadow( // Grey blur inset 0 0 10px #ddd, inset 0 0 15px #ddd, inset 0 0 20px #ddd, inset 0 0 25px #ddd, inset 0 0 30px #ddd, // Inner shadow inset 0 -10px 10px rgba(0,0,0,.05) );*/
}
.switch:after { content: ''; height: 100px; width: 100px; background-color: #eee; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFFAFAFA'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyMiUiIHN0b3AtY29sb3I9IiNlM2UzZTMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZhZmEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(22%, #e3e3e3), color-stop(100%, #fafafa)); background-image: -moz-linear-gradient(top, #e3e3e3 22%, #fafafa 100%); background-image: -webkit-linear-gradient(top, #e3e3e3 22%, #fafafa 100%); background-image: linear-gradient(to bottom, #e3e3e3 22%, #fafafa 100%); position: absolute; top: 25px; left: 25px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.switch #toggle { width: 90px; height: 90px; background: #fafafa; position: absolute; top: 30px; left: 30px; z-index: 3; -webkit-appearance: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.04); -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.04);
}
.switch #toggle:before { content: "\2713 "; font-size: 2.5em; font-weight: 700; color: #eee; padding: 20px 30px; position: absolute; z-index: 4; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
}
.switch #toggle:hover { background: #fcfcfc; -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08); -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08);
}
.switch #toggle:checked { background: #fff; -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08); -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05), inset 0 -1px 0px rgba(0, 0, 0, 0.03), inset 0 3px 0.2em rgba(0, 0, 0, 0.08);
}
.switch #toggle:checked:before { color: #00b7ea; text-shadow: 0 0 3px rgba(0, 183, 234, 0.3);
}
Developer | Casey Zumwalt |
Username | zumwalt |
Uploaded | November 07, 2022 |
Rating | 3 |
Size | 3,315 Kb |
Views | 48,576 |
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!
Name | Size |
Animate in bugs | 6,867 Kb |
Simple.com style modal window | 5,145 Kb |
Switch | 4,185 Kb |
Search all the things | 5,660 Kb |
Simple flat toggle | 2,449 Kb |
Bobbing preloader | 2,825 Kb |
Dom to image | 10,686 Kb |
Video tiles | 2,831 Kb |
A Pen by Casey Zumwalt | 3,668 Kb |
Flowing background | 3,335 Kb |
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!
Name | Username | Size |
Flat UI Button | Honchoman | 2,289 Kb |
Flex layout example | Mofny | 1,663 Kb |
Table Exercise | Fresco | 9,585 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Formations | Cantelope | 5,731 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!