How to create a “toggle switch” (on/off button) with CSS and html

The following example demonstrates creating a simple toggle switch using plain html and css.

These are really just plain checkboxes under the hood yet designating in a manner closer to a real life by css and HTML. A Toggle Switch Button control is a custom HTML5 input-type checkbox control that allows you to perform a toggle (on/off) action between checked and unchecked states.

It supports different sizes, labels, label positions, and UI customization.

Here is the html code:

<div class="switch-btn text-center ">
    <label class="switch">
        <input type="checkbox" id="togBtn" name="switchbtn">
        <div class="slider-btn round">
            <span>Basic</span><span>Premium</span>
         </div>
    </label>
</div>

Following the CSS code:

.switch {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 45px;
    text-align: left;
}

.switch input {display:none;}

.slider-btn {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca222200;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2rem;
    border: 1px solid #727272;
}

.slider-btn:before {
    position: absolute;
    content: "";
    height: 44px;
    width: 55%;
    left: 0px;
    bottom: -1px;
    background-color: #ff5a01;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2rem;
}

input:checked + .slider-btn {
    background-color: #2ab93400;
}

input:focus + .slider-btn {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider-btn:before {
    -webkit-transform: translateX(91px);
    -ms-transform: translateX(91px);
    transform: translateX(91px);
}

.slider-btn span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slider-btn span:last-child {
    right: 12px;
}

.slider-btn span:first-child {
    left: 16px;
}

Share on Facebook

Tweet

Follow us

Save