Skip to main content

Archive

Show more

Round Switch Button Animation | HTML And CSS

Round-Switch-Button-html-and-css

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.


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