Toggle Switch Button: Make Toggle Switch (on/off button) with CSS

Hi CSS Designer, this tutorial provides definitive guidance to make Toggle Switch (on/off button) with CSS and HTML.

Toggle switch button amazing web design UI components and current time this style of button involving a lot in Android and iOS mobile operating systems. That allows users to modify the setting between two modes, active and inactive, such as on / off, play and pause; In settings, primarily toggle button is used as On / Off button. 

The toggle switch button has improved UX on the web site, including better performance in native mobile apps, compared with the checkbox. Let's make that button a bit easier.

Table Content

1. button.html

2. style.css

3. Set Toggle Button Position

4. Make The Toggle Button

5. Make Circle Within Toggle Button

6. jQuery Codes

7. Toggle Switch Button In Codepen

8. Full Codes of button.html file

9. Full Codes of style.css file

1. button.html

I've created a button.html file. Inside this file, I create three-division tags below < body > tag for the visually stylish toggle switch button to implement. 

<div class="container">
 <div class="toggle-btn">
  <div class="circle"></div>
 </div>
</div> 

2. style.css

I developed style.css file separately, and I included this file path before closing < /head > tag. I put all of the CSS codes into this file. 

<link href="style.css" rel="stylesheet" type="text/css">

3. Set Toggle Button Position

Discussion of the first division tag < div class="container"></div>. 

<div class="container">
</div> 

First division tag CSS codes and .container are class attributes of this tag. 

These codes set the absolute position of the button on a web page or canvas. After applying these codes the entire toggle button was a visually center place in the canvas. 

.container
{
 position:absolute;
 top:40%;
 left:50%;
 transform:translate(-40%,-40%);
} 

4. Make The Toggle Button

Discussion of second division tag < div class="toggle-btn"></div>.

<div class="toggle-btn"></div> 

Second division tag CSS codes and .toggle-btn are class attributes of this division tag. 

After adding this CSS codes border-radius:30px the division tag was visually rounded to style button. This division color I'm constantly putting grey.  See the figure below.

.toggle-btn
{
 width:80px;
 height:40px;
 background:gray;
 border-radius:30px;
 padding:7px;
 transition:all 400ms ease-in-out;
} 

5. Make Circle Within Toggle Button

Third division tag discussion <div class="circle"></div>.

<div class="circle"></div> 

Third division tag CSS codes and the .circle is this tag's class attribute. 

After applied these CSS codes border-radius:50%, the division tag became a pure rounded circle.

I'm constantly setting this division tag width: 40px, height: 40px because the circle is set in button absolutely under, and still set a white background color.  

.toggle-btn > .circle
{
 width:40px;
 height:40px;
 background:white;
 border-radius:50%;
 transition:all 400ms ease-in-out;
} 

Understanding this codes transition: all 400ms ease-in-out;

CSS transitions allow you to change property values smoothly, over a given duration. ( note take from w3schools.com )

ease-in-out: specifies a transition effect with a slow start and end ( note take from w3schools.com )

For both the tags < div class="toggle-btn "> and < div class="circle" > see I have applied a transition effect. When you click on the circle, these properties will slide down the circle in a 400-millisecond button. 

See below CSS codes that are focused on jQuery codes. 

.toggle-btn.active
{
 background:green;
}
.toggle-btn.active > .circle
{
 margin-left:40px;
} 

6. Jquery Codes

The jQuery codes below start after the < /html > tag is closed. 

 
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('.toggle-btn').click(function(){
 
  $(this).toggleClass(".toggle-btn active");
  
 });
});

</script>

Explanation:

I set the 2nd division (button) class attribute click event .toggle-btn.

When you click the jQuery toggleClass() method to remove the .toggle-btn class and add the .toggle-btn.active class to set background color green.

Finally, the .toggle-btn.active > .circle class constantly slides the circle within the button (second div) by set of CSS code margin-left : 40px.

7. Toggle Switch Button In Codepen

See the Pen PrNBGX by hamid shaikh (@onlyhamid) on CodePen.

8. Full Codes of button.html file

Here I paste full button.html file codes see row number to quickly find codes. 

Row no 4 –  Included style.css file.

Row no 8 to 12 – I created three division tags here. 

Row no 17 – See here the included jQuery library without this file we do not execute jQuery codes.

Row no 19 to 28 – JQuery codes for circle sliding underneath a button.

<html>
 <head>
  <title>Toggle Switch Button: Make Toggle Switch (on/off button) with CSS</title>
  <link href="style.css" rel="stylesheet" type="text/css">
 </head>
 
 <body>
  <div class="container">
   <div class="toggle-btn">
    <div class="circle"></div>
   </div>
  </div>
 </body>
 
</html>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('.toggle-btn').click(function(){
 
  $(this).toggleClass(".toggle-btn active");
  
 });
});

</script>

9. Full Codes of style.css file

A total of three division tags CSS codes to make a stylish toggle switch button altogether. 

.container
{
 position:absolute;
 top:40%;
 left:50%;
 transform:translate(-40%,-40%);
}
.toggle-btn
{
 width:80px;
 height:40px;
 background:gray;
 border-radius:30px;
 padding:7px;
 transition:all 400ms ease-in-out;
}
.toggle-btn > .circle
{
 width:40px;
 height:40px;
 background:white;
 border-radius:50%;
 transition:all 400ms ease-in-out;
}
.toggle-btn.active
{
 background:green;
}
.toggle-btn.active > .circle
{
 margin-left:40px;
}

Download Codes