Pure CSS Toggle On/ Off (Learn in 5 minutes) | HTML and CSS | Free Source Code

byramCoder -
0

Hello friends, in this article you will get to know how to create an awesome animated CSS toggle on/ off button. This is a purely CSS animated toggle. You don't need to use a single command of JavaScript. Making this toggle in CSS is not a hard thing. It a very simple trick. Everyone with the knowledge of CSS can make this toggle animation. This is the blog version of the tutorial uploaded on our YouTube channel. If you want to see the full coding, you can even watch the tutorial. You can get the source code in this blog at the end or also you can download code from my GitHub repository. You can even get the source code file in the GitHub link at the end of this article.

This toggle animation just contain some HTML and CSS only. If you follow this article properly you can also make this in order to add this toggle button on your next project.

In order to make this awesome animation, you will need to follow couple of steps listed below.


Step 1:

First of all, you will need to create an index.html file and add the following code into the index.html file and save the changes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toogle Animation Pure CSS - ramCoder</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <input type="checkbox" name="" id="" class="checkbox" />
  </body>
</html>{codeBox}

Step 2:

Now when you are done with index.html, you will now need to create an style.css file and paste the following code in the file and commit changes to take effect.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(7, 7, 31);
}
.checkbox {
  height: 80px;
  width: 200px;
  appearance: none;
  background-color: white;
  border-radius: 50px;
  position: relative;
  transition: all 0.4s ease;
  cursor: pointer;
}
.checkbox:checked {
  background-color: rgb(46, 196, 46);
}
.checkbox::before {
  content: "";
  width: 80px;
  height: 80px;
  background-color: rgb(173, 205, 247);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.1);
  transition: all 0.3s ease;
}
.checkbox:checked::before {
  left: calc(200px - 80px);
}{codeBox}

Congratulations, you just build an awesome CSS toggle on/ off button. Now you can use this in any project you want.

Tags:

Post a Comment

Previous Post Next Post