CSS Button Switch

by Adi Jaya

HTML

<h2>small</h2>
  <button class="btn-switch btn-switch-sm"></button>
  
<h2>medium</h2>
  <button class="btn-switch active"></button>
  
<h2>Large</h2>
  <button class="btn-switch btn-switch-lg"></button>


<h2>X-Large</h2>
  <button class="btn-switch btn-switch-xl"></button>

CSS

.btn-switch {
    position: relative;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    margin: 0;
    border-radius: 1em;
    border: none;
    background: #c1c1c1;
    outline: none;
    cursor: pointer;
    display: inline-block;
    width: 3.5em;
    height: 1.5em;
}

.btn-switch:before {
    content: "";
    position: absolute;
    left: 6%;
    top: 10%;
    bottom: 10%;
    width: 45%;
    background: #fff;
    border-radius: 1em;
    transition: all 0.3s;
}

.btn-switch.active {
    background: #08979c;
}

.btn-switch.active:before {
    left: 50%;
}

.btn-switch-sm {
    font-size: 13px;
}

.btn-switch-lg {
    font-size: 20px;
}

.btn-switch-xl {
    font-size: 24px;
}

JavaScript

//demo
$( document ).on( "click", ".btn-switch", function(){
	$( this ).toggleClass( "active" );
});