Toogle Buttons

by prasun_sultania

HTML

<div class = "button">
    <div class = "on">
    </div>
    <div class = "off">
    </div>
</div>

CSS

.button{
    height: 50px;
width: 100px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border: 2px solid #998888;
position: relative;
box-shadow: 0 2px 2px #ccc;
}

.button .on{
-webkit-border-radius: 24px;
border-radius: 24px;
border: 2px solid #F07070;
position: absolute;
left: 50px;
width: 48px;
height: 48px;
top: 0px;
background-color: #F76F6F;
background-image: -webkit-linear-gradient(top, #FF3300, #FDA387);
box-shadow: 0 2px 2px #ccc;
}

.button .off{
    -webkit-border-radius: 24px;
border-radius: 24px;
border: 2px solid #33AA1C;
position: absolute;
left: 0px;
width: 48px;
height: 48px;
top: 0px;
background-color: #33AA1C;
background-image: -webkit-linear-gradient(top, #359716, #45DB4B);
box-shadow: 0 2px 2px #ccc;
}