In this post, we see a beautiful switch with a purple and pink theme. This switch is rectangular on one side and oval on the other. The shape of the roller inside the switch, which indicates whether the switch is selected or not, is square on the rectangular side of the switch and circular on the oval side of the switch.
HTML
<!-- This script got from www.devanswer.com -->
<div class="toggleWrapper">
<input type="checkbox" id="toggle"/>
<label for="toggle" class="toggle">
</label>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
position: relative;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
overflow: hidden;
}
body .toggleWrapper {
position: relative;
transition: all 0.3s ease-in;
width: 300px;
height: 100px;
background-color: #6e5773;
border-radius: 0 125px 125px 0;
border: 5px solid #e9e2d0;
}
body .toggleWrapper input {
display: none;
}
body .toggleWrapper .toggle {
transition: all 1.5s ease-in-out;
position: absolute;
top: 9px;
left: 9px;
height: 82px;
width: 82px;
background-color: #ea9085;
transform: rotate(0deg);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
body .toggleWrapper input:checked + .toggle {
background-color: #d45d79;
height: 86px;
width: 86px;
border-radius: 50%;
top: 7px;
left: 206px;
transform: rotate(360deg);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
body a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: absolute;
left: calc(50% - 96px);
bottom: 0;
font-style: italic;
font-size: 12px;
color: #212121;
background-color: white;
padding: 10px 20px;
border-radius: 5px 5px 0 0;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
}
