Awesome Toggle Button Animation!

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!

Comments

[CristoferK]

I hope you liked my post! Please heart, Unicorn and Comment!