.switch { display: inline-block; height: 30px; position: relative; width: 56px; } .switch > input { height: 0px; opacity: 0; width: 0px; } .switch > .switch-slider { -webkit-transition: .4s; background-color: #ccc; border-radius: 30px; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .switch > .switch-slider:before { -webkit-transition: .4s; background-color: white; border-radius: 50%; bottom: 4px; content: ""; height: 22px; left: 4px; position: absolute; transition: .4s; width: 22px; } .switch > input:checked + .switch-slider:before { -ms-transform: translateX(26px); -webkit-transform: translateX(26px); transform: translateX(26px); } .switch.switch-off-primary > input + .switch-slider { background-color: #2196F3; } .switch.switch-off-success > input + .switch-slider { background-color: #5cb85c; } .switch.switch-off-info > input + .switch-slider { background-color: #5bc0de; } .switch.switch-off-warning > input + .switch-slider { background-color: #f0ad4e; } .switch.switch-off-danger > input + .switch-slider { background-color: #d9534f; } .switch.switch-off-muted > input + .switch-slider { background-color: #555555; } .switch.switch-primary > input:checked + .switch-slider { background-color: #2196F3; box-shadow: 0 0 3px #2196F3; } .switch.switch-success > input:checked + .switch-slider { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; } .switch.switch-info > input:checked + .switch-slider { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; } .switch.switch-warning > input:checked + .switch-slider { background-color: #f0ad4e; box-shadow: 0 0 3px #f0ad4e; } .switch.switch-danger > input:checked + .switch-slider { background-color: #d9534f; box-shadow: 0 0 3px #d9534f; } .switch.switch-muted > input:checked + .switch-slider { background-color: #555555; box-shadow: 0 0 3px #555555; } .switch-label, .label-switch { float: left; font-weight: bold; padding-top: 5px; }