Build Custom iOS Swipe Button with CSS3

There are many ways to make iOS swipe button with toggle effect:

But CSS and CSS3 is the best way to make these buttons because of its light weight.

Here is the image of what we are going to make:

Let’s start with the HTML code

In this I have used checkbox to use the functionality of click. But we will not display these input checkboxes. We can use display none to hide the checkbox.

 
HTML Code

[java]
<div class="swipe-btn">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"><b></b></label>
</div>
[/java]

 
CSS Code: use below css code one by one
 

Styling of swipe-btn div:

[java]
.swipe-btn {
display: inline-block;
width: 70px;
height: 36px;
position: relative;
border-radius: 20px;
color: #FFF;
overflow: hidden;
box-shadow: 0 1px 0 #CCC;
border: 1px solid #D3D2D2;
}
[/java]

Styling of label:

[java]
.swipe-btn label {
width: 200%;
height: 36px;
line-height: 30px;
position: absolute;
top: 0;
left: 0;
-webkit-transition: 0.13s;
-moz-transition: 0.13s;
transition: 0.13s;
font-size: 12px;
z-index: 1;
cursor: pointer;
}
[/java]

Use of ::after, ::before pseudo element

[java]

.swipe-btn label::before {
content: "ON";
width: 50px;
height: 36px;
float: left;
margin-right:-20px;
padding: 3px 0 0 4px;
text-align: center;
background: #007FEA;
text-indent: -16px;
}

.swipe-btn label::after {
content: "OFF";
width: 50px;
height: 36px;
float: left;
margin-left:-15px;
padding: 3px 0 0 4px;
text-align: center;
color: #999;
background: #ccc;
}
[/java]

Then we give styling to b(bold) tag which will move in label tag on click of checkbox:

[html]

.swipe-btn label b {
display: block;
width: 36px;
height: 36px;
float: left;
position: relative;
z-index: 1;
border: 1px solid #D3D2D2;
background: #fff;
border-radius: 20px;
}
[/html]

Then we hide the checkbox:

[java]
.swipe-btn input {display: none;}
[/java]

When we click on checkbox b(bold) tag will move left in label tag. And we use pseudo-class selector “:checked” for moving b(bold) tag.

Note: We can replace “:checked” with a class also.
[java]
.swipe-btn input:checked ~ label {
left:-35px;
}
[/java]

Note: If you want to customise these buttons. You can use font Awesome in place of content: “ON” and content: “OFF” in css. Or you can use background image in place of content.

I hope you enjoyed and hope you’re taking what you see here and expand or improve upon it.