Now days, all websites are decorated with modern stylish icons and buttons. The user will more and more look into the appearance of elements or the look and feel of the web pages. To make our websites more beautiful CSS3 help us with its different properties, without having any images of buttons and icons. The full concept of Web UI has changed by CSS3; now with the help of CSS3, HTML and a few lines of jquery we can create stylish switch buttons.

For creating a Stylish Switch Button
For creating a switch button, first of all we have to create the html.
By creating a simple basic page having necessary tags head, body tags. Try this example below

HTML of Switch Button

Here we used a ‘div’ element for creating a switch and the class ‘switch-button’ will be assigned to it. And now we will give this div style to look like a switch button like border-radius, transition and some other properties for style our switch button div.

CSS for Switch Button Div
.switch-button {
width: 62px;
height: 32px;
background: #FF0080;
z-index: 0;
margin: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px;
-moz-border-radius:16px;
-webkit-border-radius:16px;
}
Here comes the use of Pseudo elements. The ::before pseudo-element can be used to insert some content before the content of an element and :after pseudo-element can be used to insert some content after the content of an element.
:after {
content: ‘ ‘;
height: 29px;
width: 29px;
border-radius: 28px;
background: #fff;
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
And now here, we are adding a circle after the content of the div using: after pseudo element and adding some animation, so that the button transition is smooth, when we click on it. Element should be positioned absolute.
So here now we will add the background color for the switch button when it is clicked.
.switchOn, switchOn:before{
background: #B4045F !important;
}
.switchOn:after {
Left: 32px !important;
}
And here we toggle the element; ie. Adding or removing the class ‘switchOn’. So when the switchOn class added , we will position the pseudo element as defined in the css.
And now, let me add the toggle effect using few lines of jquery.

jquery

$(document).ready(function(){
$(‘.switch-button’).click(function(){
$(this).toggleClass(“switchOn”);
});
});