DEV Community

loading...
Cover image for Awesome Toggle Button Animation!

Awesome Toggle Button Animation!

cristoferk profile image CristoferK Updated on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

Now let's set the padding and margin of the page to 0

body {
    margin: 0;
    padding: 0;
    background: #f3f3f3;
    transition: .5s;
}
Enter fullscreen mode Exit fullscreen mode

Let's make the div stay in the center

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

I will make that when will be pressed it will turn blue

input:checked[type="checkbox"] {
    background: #03a9f4;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Also, we will make that when will be pressed will go to the right

input:checked[type="checkbox"]:before {
    left: 40px;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
cristoferk profile image
CristoferK Author

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

Forem Open with the Forem app