Round Switch Button Animation Using HTML And CSS
"Round switch button" is mostly used to switch dark mode to light mode or vice versa. Similarly, we can use this button where you have the position of the switch or toggle. We are using html and css to develop this animation. There is no Javascript.
So let's try to understand the working of this animation. We have an input element of type checkbox then after click on the input it changes to the state of the checkbox. That's all. We hope you will like it.
For more button animation you can follow button playlist.
If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.
You can read interesting articles on web development. The link is given below.
READ ALSO:
01. HTML STRUCTURE
<!DOCTYPE html> <html> <head> <title>Round Switch Button Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> main content. </body> </html>
02. HTML
<!DOCTYPE html> <html> <head> <title>Round Switch Button</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> </body> </html>
03. CSS
body{ text-align: center; } .switch{ position: relative; display: inline-block; top: 280px; width: 60px; height: 34px; } .slider{ position: absolute; cursor: pointer; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #ccc; transition: 0.4s; } .switch input{ opacity: 0px; width: 0px; height: 0px; } .slider::before{ position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; } input:checked + .slider{ background-color: #2196F3; } input:focus + .slider{ box-shadow: 0px 0px 1px #2196F3; } input:checked + .slider::before{ transform: translateX(26px); } .slider.round{ border-radius: 34px; } .slider.round::before{ border-radius: 50%; }
04. Youtube Video
Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.
05. SOURCE CODE
After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.
Comments
Post a Comment