Build Custom iOS Swipe Button with CSS3

24 / Jul / 2015 by Sunniya Maini 2 comments

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:

switch-btn

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.

FOUND THIS USEFUL? SHARE IT

comments (2)

    1. Amit Narayan

      Hi Jhon,
      It’s working fine use following css code under head tag:

      .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;
      }
      .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;
      }
      .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;
      }
      .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;
      }
      .swipe-btn input {display: none;}
      .swipe-btn input:checked ~ label {
      left:-35px;
      }

      and use following html code under body tag:

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

      It will be working fine. thanks.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *