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

Saturday, 29 December 2018

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.

Make Toggle Switch (on/off button) with CSS and HTML . onlyxcodes

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

Make The Toggle Button

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

Make Circle Within Toggle Button

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.


Friends here,

if you're much like HTML and CSS, I highly recommend that you learn the below course.


It is one of the unique, best online learning courses. Daniel Walter Scott will teach you the basics of HTML5 and CSS3 from scratch in this course. Including 5 projects, perfect for beginners.

Here is the key skill you'll become learning in this course :-

1. Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.

2. Learn how to create forms and to choose great fonts for your website.

3. Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.

4. Setup a domain name with hosting so that your website is live on the internet for others to see.

5. You will build 4 sites together in this course.
  • a simple but elegant restaurant website.
  • a bike repair website.
  • a responsive portfolio website.
  • a Bootstrap website.

On average, this course has 4.7 ratings from close to 1,316 participants, and more than 5,462 students have enrolled in this excellent course. I recommend you wrap it up.




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

No comments:

Post a comment