Creating a iOS Style Toggle Button with Pure HTML 5 and CSS3

This iOS style toggle button is created base on css3 and svg, it can be used any where what support html 5 and svg. Meanwhile, you can change the style of toggle button easily by css style.

How to create an iOS toggle button?

1.Copy and past code below in your html page

<div class="toggle-btn">
<div class="toggle-round">
<input type="checkbox" name="round-test" id="round-test" />
<label for="round-test"></label>
<figure class="icon-unchecked"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" version="1.1" viewBox="0 0 16 16" width="16px">
<g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill="#000000" id="Group" transform="translate(-144.000000, -480.000000)">
<path d="M144,480 L160,480 L160,496 L144,496 Z M145,481 L145,495 L159,495 L159,481 Z M145,481" id="Rectangle 152 copy" />
</g>
</g>
</svg> </figure>
<figure class="icon-checked">
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
<title/>
<defs/>
<g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill="#000000" id="Group" transform="translate(0.000000, -432.000000)">
<path d="M0,432 L7,432 L7,439 L0,439 Z M9,432 L16,432 L16,439 L9,439 Z M0,441 L7,441 L7,448 L0,448 Z M9,441 L16,441 L16,448 L9,448 Z M9,441" id="Rectangle 184"/>
</g>
</g>
</svg> </div>
</div>

2.Set the css sytle

.toggle-btn {
position: relative;
max-width: 200px;
height: 50px;
height: 50px;
line-height: 50px;
}
.toggle-btn .toggle-round {
margin: 0 auto;
width: 75%;
height: 100%;
line-height: 50px;
border: 10px solid #FFFFFF;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.toggle-btn input[type="checkbox"] {
position: absolute;
left: -2500px;
}
.toggle-btn label {
display: block;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.toggle-btn .toggle-round label:before {
position: absolute;
content: " ";
top: 50%;
margin-top: -18px;
margin-left: 10px;
display: inline-block;
background: #FFFFFF;
width: 36px;
height: 36px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: -moz-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.toggle-btn input[type="checkbox"]:checked ~ label:before {
-webkit-transform: translate3d(95px, 0, 0);
-moz-transform: translate3d(95px, 0, 0);
transform: translate3d(95px, 0, 0);
}
.toggle-btn figure {
position: absolute;
top: 50%;
margin-top: 2px;
}
.toggle-btn figure g {
-webkit-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.toggle-btn figure.icon-unchecked {
left: -65px;
}
.toggle-btn figure.icon-checked {
right: -65px;
}
.toggle-btn figure.icon-unchecked g {
fill: rgba(0,0,0, 0.5);
}
.toggle-btn figure.icon-checked g {
fill: #FFFFFF;
}
.toggle-btn input[type="checkbox"]:checked ~ figure.icon-unchecked g {
fill: #FFFFFF;
}
.toggle-btn input[type="checkbox"]:checked ~ figure.icon-checked g {
fill: rgba(0,0,0, 0.5);
}