"Animated Css Switch, How to make Switch using CSS"
Bootstrap 4.1.1 Snippet by RAJKUMAR123

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <title>Switch</title> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ height: 100%; width: 100%; } body{ display: flex; align-items: center; justify-content: center; margin: 0; flex-direction:column; } .bg{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ed1f24; z-index: -1; transition: background 0.5s linear; } input{ display: none; } .toggle{ width: 100px; height: 50px; background-color: #fff; border-radius: 35px; position: relative; cursor: pointer; } .toggle-switch:before{ content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: #ed1f24; bottom: 5px; left: 5px; transition: 0.3s ease-in-out; } .toggle-switch:after{ content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: #ed1f24; bottom: 5px; left: 5px; transition: 0.3s ease-in-out; cursor: pointer; transform: scale(0); } .x-shape:before{ content: ""; position: absolute; height: 30px; width: 5px; background-color: #fff; transform: rotate(-45deg) scale(1); left: 22px; bottom: 10px; transition: 0.3s cubic-bezier(1,0,0,1) 0.3s; } .x-shape:after{ content: ""; position: absolute; height: 30px; width: 5px; background-color: #fff; transform: rotate(45deg) scale(1); left: 22px; bottom: 10px; transition: 0.3s cubic-bezier(1,0,0,1) 0.3s; } h1{ color:#fff; } h1>a{ text-decoration:none; } .v-shape:before{ content: ""; position: absolute; border-right: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(45deg) scale(0); transform-origin: center bottom; left: 59px; bottom: 18px; height: 20px; width: 10px; transition: 0.3s cubic-bezier(1,0,0,1) 0.3s; } input[type=checkbox]:checked + .toggle-switch:before{ left: 55px; transform: scale(0); background-color: #0c426f; } input[type=checkbox]:checked + .toggle-switch:after{ left: 55px; transform: scale(1); background-color: #0c426f; } input[type=checkbox]:checked ~ .bg{ background-color: #0c426f; } input[type=checkbox]:checked ~ .x-shape:before{ transform: rotate(-45deg) scale(0); } input[type=checkbox]:checked ~ .x-shape:after{ transform: rotate(45deg) scale(0); } input[type=checkbox]:checked ~ .v-shape:before{ transform: rotate(45deg) scale(1); } </style> </head> <body> <label class="toggle"> <input type="checkbox"> <span class="toggle-switch"></span> <div class="x-shape"></div> <div class="v-shape"></div> <div class="bg"></div> </label><br> <a href="https://www.admecindia.co.in/"><h1>ADMEC MULTIMEDIA</h1></a> <p><small>Designed By Rajkumar <sub style="color:#fff">(Full Stack Web Developer)</sub></small></p> </body>

Related: See More

Get Shit Done Kit
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: