Switch
How do I make an switch?
What is a switch? How do you make a switch? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.
Switch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>switch</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { width:100%; height:100%; margin:0; padding:0;
}
body { background:#343436;
}
.special-checkbox { display:block; position:absolute; width:80px; height:40px; perspective: 100; perspective-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); cursor:pointer; left:50%; top:50%; margin:-20px -40px; border-radius:13px; -webkit-user-select: none; padding: 2px 2px 1px 1px; border: 1px solid #f44d12; box-shadow:0 0 30px rgba(244, 77, 18, 0.4); -webkit-transition:all 0.3s;
}
.special-checkbox.checked { border: 1px solid #b7f412; box-shadow:0 0 30px rgba(183, 244, 18, 0.4);
}
.special-checkbox input { display:none;
}
.special-checkbox a { position:relative; display:block; width:80px; height:40px;
}
.special-checkbox a span { position:absolute; display:block; width:40px; height:39px; text-align:center; line-height:40px; border: 1px solid #333; margin-top: -1px; transition:all 0.3s; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-transform:uppercase; font-weight:bold;
}
.special-checkbox a .on { background:#555; border-radius:10px 0 0 10px; box-shadow: -3px 0 0 -1px #333; transform: rotateY(20deg) translateZ(5px); border-right: none; color:#333; text-shadow:none;
}
.special-checkbox a .off { background: #666; border-radius: 0 10px 10px 0; left: 40px; border-left: none; box-shadow: none; transform: rotateY(0deg) translateZ(0px); color:#f44d12; text-shadow:0 0 20px #f44d12;
}
.special-checkbox.checked a .on { background:#777; box-shadow: none; transform: rotateY(0deg) translateZ(0px); color:#b7f412; text-shadow:0 0 20px #b7f412;
}
.special-checkbox.checked a .off { background: #999; box-shadow: 3px 0px 0 -1px #333; transform: rotateY(-20deg) translateZ(5px); color:#444; text-shadow:none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <label class="special-checkbox checked"> <a> <span class="on">yes</span> <span class="off">no</span> </a> <input type="checkbox" name="checkbox" value="value" checked="checked" />
</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Switch - Script Codes CSS Codes
body, html { width:100%; height:100%; margin:0; padding:0;
}
body { background:#343436;
}
.special-checkbox { display:block; position:absolute; width:80px; height:40px; perspective: 100; perspective-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); cursor:pointer; left:50%; top:50%; margin:-20px -40px; border-radius:13px; -webkit-user-select: none; padding: 2px 2px 1px 1px; border: 1px solid #f44d12; box-shadow:0 0 30px rgba(244, 77, 18, 0.4); -webkit-transition:all 0.3s;
}
.special-checkbox.checked { border: 1px solid #b7f412; box-shadow:0 0 30px rgba(183, 244, 18, 0.4);
}
.special-checkbox input { display:none;
}
.special-checkbox a { position:relative; display:block; width:80px; height:40px;
}
.special-checkbox a span { position:absolute; display:block; width:40px; height:39px; text-align:center; line-height:40px; border: 1px solid #333; margin-top: -1px; transition:all 0.3s; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-transform:uppercase; font-weight:bold;
}
.special-checkbox a .on { background:#555; border-radius:10px 0 0 10px; box-shadow: -3px 0 0 -1px #333; transform: rotateY(20deg) translateZ(5px); border-right: none; color:#333; text-shadow:none;
}
.special-checkbox a .off { background: #666; border-radius: 0 10px 10px 0; left: 40px; border-left: none; box-shadow: none; transform: rotateY(0deg) translateZ(0px); color:#f44d12; text-shadow:0 0 20px #f44d12;
}
.special-checkbox.checked a .on { background:#777; box-shadow: none; transform: rotateY(0deg) translateZ(0px); color:#b7f412; text-shadow:0 0 20px #b7f412;
}
.special-checkbox.checked a .off { background: #999; box-shadow: 3px 0px 0 -1px #333; transform: rotateY(-20deg) translateZ(5px); color:#444; text-shadow:none;
}
Switch - Script Codes JS Codes
$('.special-checkbox a').on('click', function(){ var $cb = $(this).parents('.special-checkbox'); if($cb.find('input[type="checkbox"]').is(':checked')) { $cb.removeClass('checked'); } else { $cb.addClass('checked'); }
});
Developer | Martin Grand |
Username | martingrand |
Uploaded | August 11, 2022 |
Rating | 3.5 |
Size | 3,122 Kb |
Views | 50,600 |
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 |
Pure css loader | 3,918 Kb |
Pure css rain | 4,855 Kb |
Glitch animation generator | 2,321 Kb |
3d mosaic, with any image from your computer | 12,990 Kb |
Animated captcha concept | 2,723 Kb |
The easiest way to centering a fluid element vertically, and horizontally | 1,817 Kb |
Clock | 3,520 Kb |
BEM class name preprocess | 2,474 Kb |
Pure css christmas tree | 3,621 Kb |
A Pen by Martin Grand | 3,261 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 |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 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!