Light Switch
How do I make an light switch?
A switch that glows green when turned on and red when turned off.. What is a light switch? How do you make a light switch? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.
Light Switch Previews
Light Switch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Light Switch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <form> <label class="off label">Off</label> <div class="switch-wrapper"> <div class="switch-overlay"> </div> <div class="switch-top"> <input type="checkbox" name="switch" class="button" checked="checked"> </div> <div class="light on"></div> <div class="light-off off"></div> <div class="switch-bottom"></div> </div> <label class="on switch-on label">On</label> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Light Switch - Script Codes CSS Codes
/** * Variables. */
/** * Keyframes. */
@-webkit-keyframes switch-overlay { 0% { opacity: 0.5; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { opacity: 0; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@keyframes switch-overlay { 0% { opacity: 0.5; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { opacity: 0; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@-webkit-keyframes switch-overlay-reverse { 0% { opacity: 0; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); } 100% { opacity: 0.5; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@keyframes switch-overlay-reverse { 0% { opacity: 0; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); } 100% { opacity: 0.5; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@-webkit-keyframes switch { 100% { -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@keyframes switch { 100% { -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@-webkit-keyframes switch-reverse { 0% { -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@keyframes switch-reverse { 0% { -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@-webkit-keyframes switch-light { 100% { top: -65px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@keyframes switch-light { 100% { top: -65px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@-webkit-keyframes switch-light-reverse { 0% { top: -65px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { top: -45px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@keyframes switch-light-reverse { 0% { top: -65px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { top: -45px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@-webkit-keyframes switch-bottom { 100% { -moz-border-radius: 50% 15% 50% 50%; -webkit-border-radius: 50%; border-radius: 50% 15% 50% 50%; -moz-box-shadow: -5px 2px 10px -3px #111; -webkit-box-shadow: -5px 2px 10px -3px #111; box-shadow: -5px 2px 10px -3px #111; }
}
@keyframes switch-bottom { 100% { -moz-border-radius: 50% 15% 50% 50%; -webkit-border-radius: 50%; border-radius: 50% 15% 50% 50%; -moz-box-shadow: -5px 2px 10px -3px #111; -webkit-box-shadow: -5px 2px 10px -3px #111; box-shadow: -5px 2px 10px -3px #111; }
}
@-webkit-keyframes switch-bottom-reverse { 0% { -moz-border-radius: 50% 15% 50% 50%; -webkit-border-radius: 50%; border-radius: 50% 15% 50% 50%; -moz-box-shadow: -5px 2px 10px -3px #111; -webkit-box-shadow: -5px 2px 10px -3px #111; box-shadow: -5px 2px 10px -3px #111; } 100% { -moz-border-radius: 15% 50% 50%; -webkit-border-radius: 15%; border-radius: 15% 50% 50%; -moz-box-shadow: -15px 5px 20px -8px #111; -webkit-box-shadow: -15px 5px 20px -8px #111; box-shadow: -15px 5px 20px -8px #111; }
}
@keyframes switch-bottom-reverse { 0% { -moz-border-radius: 50% 15% 50% 50%; -webkit-border-radius: 50%; border-radius: 50% 15% 50% 50%; -moz-box-shadow: -5px 2px 10px -3px #111; -webkit-box-shadow: -5px 2px 10px -3px #111; box-shadow: -5px 2px 10px -3px #111; } 100% { -moz-border-radius: 15% 50% 50%; -webkit-border-radius: 15%; border-radius: 15% 50% 50%; -moz-box-shadow: -15px 5px 20px -8px #111; -webkit-box-shadow: -15px 5px 20px -8px #111; box-shadow: -15px 5px 20px -8px #111; }
}
@-webkit-keyframes switch-light-off { 0% { top: 57px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { top: 35px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@keyframes switch-light-off { 0% { top: 57px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); } 100% { top: 35px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); }
}
@-webkit-keyframes switch-light-off-reverse { 0% { top: 35px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); } 100% { top: 57px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
@keyframes switch-light-off-reverse { 0% { top: 35px; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); } 100% { top: 57px; -moz-transform: rotateX(55deg) rotateY(-18deg); -ms-transform: rotateX(55deg) rotateY(-18deg); -webkit-transform: rotateX(55deg) rotateY(-18deg); transform: rotateX(55deg) rotateY(-18deg); }
}
/** * Styling. */
* { -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
body { background-color: #555; height: 100%; left: 0; margin: 0; position: relative; top: 0; width: 100%;
}
.wrapper { height: 300px; left: calc(50% - 150px); position: fixed; text-align: center; top: calc(50% - 150px); width: 300px;
}
.label { display: inline-block; font-size: 150%;
}
.switch-on { color: #fff; text-shadow: 0 0 3px #fff;
}
.button { visibility: hidden;
}
.switch-wrapper { display: inline-block; position: relative; z-index: 0;
}
.switch-top.activated { -webkit-animation: switch 0.3s linear forwards; animation: switch 0.3s linear forwards;
}
.switch-top.deactivated { -webkit-animation: switch-reverse 0.3s linear forwards; animation: switch-reverse 0.3s linear forwards;
}
.switch-top { background-color: #6b6b6b; border: 1px solid #000; cursor: pointer; height: 100px; position: relative; width: 100px; z-index: 5; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg); *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF6B6B6B', endColorstr='#FF000000'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #6b6b6b), color-stop(100%, #000000)); background-image: -moz-linear-gradient(left, #6b6b6b 0%, #000000 100%); background-image: -webkit-linear-gradient(left, #6b6b6b 0%, #000000 100%); background-image: linear-gradient(to right, #6b6b6b 0%, #000000 100%);
}
.switch-overlay { background-color: #000; cursor: pointer; height: 100px; position: absolute; width: 100px; z-index: 12; opacity: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg);
}
.switch-overlay.activated { -webkit-animation: switch-overlay 0.3s linear forwards; animation: switch-overlay 0.3s linear forwards;
}
.switch-overlay.deactivated { -webkit-animation: switch-overlay-reverse 0.3s linear forwards; animation: switch-overlay-reverse 0.3s linear forwards;
}
.switch-bottom.activated { -webkit-animation: switch-bottom 0.3s linear forwards; animation: switch-bottom 0.3s linear forwards;
}
.switch-bottom.deactivated { -webkit-animation: switch-bottom-reverse 0.3s linear forwards; animation: switch-bottom-reverse 0.3s linear forwards;
}
.switch-bottom { background-color: #222; border-top: 5px solid #000; cursor: pointer; height: 70px; overflow: hidden; position: relative; top: -80px; width: 100px; z-index: 0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF333333'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(100%, #333333)); background-image: -moz-linear-gradient(left, #000000 0%, #333333 100%); background-image: -webkit-linear-gradient(left, #000000 0%, #333333 100%); background-image: linear-gradient(to right, #000000 0%, #333333 100%); -moz-border-radius: 15% 50% 50%; -webkit-border-radius: 15%; border-radius: 15% 50% 50%; -moz-box-shadow: -15px 5px 20px -8px #111; -webkit-box-shadow: -15px 5px 20px -8px #111; box-shadow: -15px 5px 20px -8px #111;
}
.light.activated { -webkit-animation: switch-light 0.3s linear forwards; animation: switch-light 0.3s linear forwards;
}
.light.deactivated { -webkit-animation: switch-light-reverse 0.3s linear forwards; animation: switch-light-reverse 0.3s linear forwards;
}
.light.on { background-color: #0f0;
}
.light.off { background-color: #050;
}
.light { cursor: pointer; height: 10px; position: relative; left: 78px; top: -45px; width: 10px; z-index: 15; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 -3px 0 1px #363, 0 -4px 0 1px #999; -webkit-box-shadow: 0 -3px 0 1px #363, 0 -4px 0 1px #999; box-shadow: 0 -3px 0 1px #363, 0 -4px 0 1px #999; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg);
}
.light-off { cursor: pointer; height: 10px; position: absolute; left: 15px; top: 35px; width: 10px; z-index: 15; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 -3px 0 1px #222, 0 -4px 0 1px #999; -webkit-box-shadow: 0 -3px 0 1px #222, 0 -4px 0 1px #999; box-shadow: 0 -3px 0 1px #222, 0 -4px 0 1px #999; -moz-transform: rotateX(55deg) rotateY(18deg); -ms-transform: rotateX(55deg) rotateY(18deg); -webkit-transform: rotateX(55deg) rotateY(18deg); transform: rotateX(55deg) rotateY(18deg);
}
.light-off.on { background-color: #f00;
}
.light-off.off { background-color: #300;
}
.light-off.activated { -webkit-animation: switch-light-off 0.3s linear forwards; animation: switch-light-off 0.3s linear forwards;
}
.light-off.deactivated { -webkit-animation: switch-light-off-reverse 0.3s linear forwards; animation: switch-light-off-reverse 0.3s linear forwards;
}
Light Switch - Script Codes JS Codes
$('.switch-top, .light, .switch-bottom, .switch-overlay').click(function() { // Lights on! if ($('.button').is(':checked')) { $('.switch-top').addClass('activated'); $('.switch-bottom').addClass('activated'); $('.light').addClass('activated'); $('.switch-overlay').addClass('deactivated'); $('.light-off').addClass('deactivated'); $('.switch-top').removeClass('deactivated'); $('.switch-bottom').removeClass('deactivated'); $('.light').removeClass('deactivated'); $('.switch-overlay').removeClass('activated'); $('.light-off').addClass('activated'); $('.off').addClass('switch-on'); $('.on').removeClass('switch-on'); $('.button').prop('checked', false); $('.light').removeClass('on'); $('.light').addClass('off'); $('.light-off').removeClass('off'); $('.light-off').addClass('on'); } // Lights off! else { $('.switch-top').addClass('deactivated'); $('.switch-bottom').addClass('deactivated'); $('.light').addClass('deactivated'); $('.light-off').addClass('activated'); $('.switch-overlay').addClass('activated'); $('.switch-top').removeClass('activated'); $('.switch-bottom').removeClass('activated'); $('.light').removeClass('activated'); $('.switch-overlay').removeClass('deactivated'); $('.light-off').removeClass('deactivated'); $('.on').addClass('switch-on'); $('.off').removeClass('switch-on'); $('.button').prop('checked', true); $('.light').removeClass('off'); $('.light').addClass('on'); $('.light-off').removeClass('on'); $('.light-off').addClass('off'); }
});
| Developer | Bryan Jones |
| Username | bartuc |
| Uploaded | July 13, 2022 |
| Rating | 3 |
| Size | 4,933 Kb |
| Views | 52,624 |
Do you need developer help for Light 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!
Bryan Jones (bartuc) Script Codes
| Name | Size |
| Solar System Maker | 3,893 Kb |
| Planet Rotation | 2,953 Kb |
| Card Flip | 5,712 Kb |
| Shine Effect | 2,944 Kb |
| Screens | 5,328 Kb |
| Earth Clock | 5,611 Kb |
| Galaxy | 5,087 Kb |
| Atom | 3,816 Kb |
| See the Truth | 3,488 Kb |
| Lightbulb | 2,833 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Anoop | Anoopjohn | 330,760 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| Welcome | Nakome | 6,076 Kb |
| Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
| HTML5 Breakout | Jaysalvat | 4,873 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| Alumni ECA | MatheusLima92 | 3,777 Kb |
| Perforated foil | 0x04 | 2,617 Kb |
| Tab Menus | Zephyr | 3,180 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Do you want hide your ip address?
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!