Please subscribe to my YouTube channel for programming tutorials! https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ
Today I made an awesome toggle animation using HTML and CSS! I hope you will like it too! I know is simple.
Here is the final result:
Code:
Let's start by adding a checkbox in a div named center
<div class="center">
<input type="checkbox" id="dark-change">
</div>
Now let's set the padding and margin of the page to 0
body {
margin: 0;
padding: 0;
background: #f3f3f3;
transition: .5s;
}
Let's make the div stay in the center
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Now we can start styling the checkbox!
input[type="checkbox"] {
position: relative;
width: 80px;
height: 40px;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
transition: .5s;
}
I will make that when will be pressed it will turn blue
input:checked[type="checkbox"] {
background: #03a9f4;
}
And now we are ready to make the circle!
input[type="checkbox"]:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
top: 0px;
left: 0;
background: #fff;
transition: .5s;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
Also, we will make that when will be pressed will go to the right
input:checked[type="checkbox"]:before {
left: 40px;
}
I hope you liked my post! Please heart, Unicorn and Comment!
Top comments (1)
I hope you liked my post! Please heart, Unicorn and Comment!