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…

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.



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>



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;
}



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 {
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}



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;
}

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%);
  }
  • To Change the background on button toggle

Background transition


  input:checked + label {
  background-color: #243d42;
  }

  • 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.

Magnetic Effect

  label:active:after {
  width: 160px;
  }



Ouput Preview

Output



Try Demo



Find Me On

@karancodes Instagram Profile


Print Share Comment Cite Upload Translate
APA
Karan Kumar | Sciencx (2024-03-29T09:19:48+00:00) » How to create a custom Toggle Switch using CSS. Retrieved from https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/.
MLA
" » How to create a custom Toggle Switch using CSS." Karan Kumar | Sciencx - Saturday July 31, 2021, https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/
HARVARD
Karan Kumar | Sciencx Saturday July 31, 2021 » How to create a custom Toggle Switch using CSS., viewed 2024-03-29T09:19:48+00:00,<https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/>
VANCOUVER
Karan Kumar | Sciencx - » How to create a custom Toggle Switch using CSS. [Internet]. [Accessed 2024-03-29T09:19:48+00:00]. Available from: https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/
CHICAGO
" » How to create a custom Toggle Switch using CSS." Karan Kumar | Sciencx - Accessed 2024-03-29T09:19:48+00:00. https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/
IEEE
" » How to create a custom Toggle Switch using CSS." Karan Kumar | Sciencx [Online]. Available: https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/. [Accessed: 2024-03-29T09:19:48+00:00]
rf:citation
» How to create a custom Toggle Switch using CSS | Karan Kumar | Sciencx | https://www.scien.cx/2021/07/31/how-to-create-a-custom-toggle-switch-using-css/ | 2024-03-29T09:19:48+00:00
https://github.com/addpipe/simple-recorderjs-demo