TheLazy.Dev
Portfolio GitHub

Blog

css |switch |toggle |tutorial

How to create a custom Toggle Switch using CSS

karankumardev

Karan Developer

Posted on July 31, 2021

How to create a custom Toggle Switch using CSS

Let's create a simple customized toggle switch using CSS. Initially when I was trying to create this, I founded it very confusing because many developers have created this button but none of explain it how is this working.

So after struggling a little bit, I've learned how to create this and I want to share with you all.

I've learned this technique by Marcus Burnette. You can check his Codepen, there are more such interesting pens.

Prerequisite Knowledge

Basics of HTML, CSS (specially Pseudo Elements)

How it works

Button working

As we all know when we assign a label to a input, we can target the input by clicking on label too.

That's what we are going to take advantage of and by this we can convert our label into custom switch which will act same as checkbox.

Let's Start

Workflow

These are the steps that we are going to follow in order to create this button.

1. Create HTML structure

Structure

In this stages we will create the html elements which are input checkbox and a label that is assigned to it but its inner content should be empty.

Reference code is given below. 



<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>

<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

2. Hide the input element

Now we will hide the input element as I said earlier we will make the switch with label element so we don't need the checkbox.




input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode

3. Style the button body

Button Body

We will create the body of switch or the outer part in which ball will move.

Reference code is given below. 



label {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}
Enter fullscreen mode Exit fullscreen mode

4. Create the toggle ball

Toggle Ball

Now we'll create the toggle ball using pseudo element ::after.

Reference code is given below. 



label::after {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #e8f5f7;
  position: absolute;
  border-radius: 70px;
  top: 15px;
  left: 15px;
  transition: 0.5s;
}
Enter fullscreen mode Exit fullscreen mode

At this stage our 80% of work is done, now we just have to add the animation to make our switch work.

5. Adding animation

As we know when we toggle the label, checkbox also get toggled.

  • Now we'll add the condition, when checkbox gets checked our ball should be shifted to the right. Slide Animation 


   input:checked + label:after {
   left: calc(100% - 10px);
   transform: translateX(-100%);
   }
Enter fullscreen mode Exit fullscreen mode
  • To Change the background on button toggle Background transition 



   input:checked + label {
   background-color: #243d42;
   }
Enter fullscreen mode Exit fullscreen mode
  • Now If want a more smooth magnetic effect. When ball get active it its width should increase for a moment. A element gets active when we click on it. We can do this by using :active selector.


    label:active:after {
    width: 160px;
    }
Enter fullscreen mode Exit fullscreen mode

Output Preview

Output

Try Demo

Find Me On

@karancodes Instagram Profile

💖 💪 🙅 🚩
karankumardev
Karan Developer

Posted on July 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to create a custom Toggle Switch using CSS
css How to create a custom Toggle Switch using CSS

July 31, 2021