DEV Community

Cover image for Awesome Toggle Button Animation!
CristoferK
CristoferK

Posted on • Edited on

Awesome Toggle Button Animation!

#html #css #design #button

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!

Top comments (1)

Collapse
 
cristoferk profile image
CristoferK •

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