<h1>iOS7+ Toggle Switch</h1>
<h2>by Malik Dellidj</h2>
<div class="content">
<input type="checkbox" name="toggle" class="sw" id="toggle-1" checked>
<label for="toggle-1"></label>
<hr />
<input type="checkbox" name="toggle" class="sw" id="toggle-2">
<label for="toggle-2"><span>With a little label</span>
</label>
</div>
<div>
<a href="https://codepen.io/kowlor/" class="fa fa-codepen icon" target="_blank"></a>
<a href="https://twitter.com/Dathink" class="fa fa-twitter icon" target="_blank"></a>
<a href="https://github.com/KOWLOR" class="fa fa-github-alt icon" target="_blank"></a>
</div>
$sw-height: 30px;
$sw-width: 51px;
input{
&.sw{
opacity: 0; position:absolute; left: -9999px;
& + label{
user-select: none;
transition: .2s ease;
display: inline-block;
height: $sw-height;
width: $sw-width;
position:relative;
box-shadow: inset 0 0 0px 2px #e4e4e4;
border-radius: 60px;
&:before{
content: "";
position: absolute;
display: block;
height: $sw-height;
width: $sw-height;
top: 0;
left: 0;
border-radius: $sw-height/2;
background: rgba(76,217,100,0);
transition: .2s cubic-bezier(.24,0,.5,1);
}
/* White toggle */
&:after {
content: "";
position: absolute;
display: block;
height: 28px;
width: 28px;
top: 50%;
margin-top:-14px;
left: 1px;
border-radius: 60px;
background: #fff;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0,0%,0%,.04), 0 4px 9px hsla(0,0%,0%,.13), 0 3px 3px hsla(0,0%,0%,.05);
transition: .35s cubic-bezier(.54,1.60,.5,1);
}
span{
white-space:nowrap;
height:$sw-height;
line-height:$sw-height;
margin-left: $sw-width;
padding-left:16px;
}
}
&:checked{
& + label:before {
width: $sw-width;
background: rgba(76,217,100,1);
transition: width .2s cubic-bezier(0,0,0,.1) !important;
}
& + label:after{
left: $sw-width - $sw-height + 1;
}
& + label{
box-shadow: inset 0 0 0px 25px #e4e4e4;
transition: box-shadow 2.5s cubic-bezier(0,1.2,.94,.95)}
}
}
}
/* Pen Style */
body{
padding:30px 0;
text-align:center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#444;
background:#F4F4F4;
-webkit-font-smoothing:antialiased
}
h1{
font-weight:200;
font-size:46px;
line-height:30px;
}
h2{
font-weight:500;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
line-height:16px;
color: #C3C3C3;
}
.content{
border-radius:6px;
background:white;
padding:40px;
width:700px;
margin:30px auto;
}
hr{
background:transparent;
height:1px;
border:0;
margin:20px 0;
border-top:1px solid #F2F2F2;
}
.icon{
font-size:18px;
text-decoration:none;
color:#C3C3C3;
vertical-align: middle;
margin-right:4px;
}
View Compiled
This Pen doesn't use any external JavaScript resources.