user2621561 user2621561 - 2 years ago 134
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.

Answer Source

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">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download