user2621561 user2621561 - 7 months ago 19
jQuery Question

Toggle switch using html5 and css3

I am making a hybrid app where I want to show a toggle switch with aenter image description here customized icon on it. Any idea how to implement this.


Use this simple code

.switch {
    width: 100px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 3px;
    overflow: hidden;

.switch > div {
    width: 50%;
    height: 100%;
    background: #A81414;
    margin-left: 0px;
    transition: all 1s;

.switch.on > div {
    margin-left: 50%;
    background: green;  
<script src=""></script>
<div class="switch">