Toggle Buttons create using pure css

Collection of custom pure css free html and CSS toggle switch code examples. toggle switch style Inspiration with html and CSS Code this is a simple toggle switch that has an slight bounce animation after you switch the toggle on/off.

Creating a toggle switch in CSS. Let’s create an input checkbox with label, so we will change the label as switch and turn on the switch once the checkbox is checked and turn off when it’s unchecked. The label is placed below the input so we will choose the label using the adjacent selector.

Accessible, screen-reader friendly, CSS-only toggle switches with full keyboard access and mobile support, using normal type controls. ButtonStrip.js could be a vanilla JavaScript plugin that dynamically generates an inline toggle button to trigger actions after you click on the left or right button.

Toggle switches might not be the most noticeable UI parts during a type, however they’ve arguably done more to boost a mundane task than the rest. Before toggles came on, we often used one checkbox element to “switch” one thing on or off. And we’re starting to see toggle.

HTML

<main>
    <h1><span id="app-name">Toggle buttons</span></h1>
    <section>
        <div class="toggle-btn" id="_1st-toggle-btn">
            <input type="checkbox">
            <span></span>
        </div>
        
        <div class="toggle-btn" id="_2nd-toggle-btn">
            <input type="checkbox">
            <span></span>
        </div>

        <div class="toggle-btn" id="_3rd-toggle-btn">
            <input type="checkbox">
            <span></span>
        </div>
    </section>
</main>

CSS

body {
    margin: 0px;
    background-color: #f8f8f8;
}
h1 {
    font-family: Segoe UI;
    text-align: center;
    line-height: 42px;
    padding-bottom: 23px;
    margin: 10px 0px;
    border-bottom: 1px solid #dadada;
}
#app-name {
    color: #f19000;
}
section {
    width: 250px;
    margin: 100px auto;
    padding: 60px;
    background-color: #fff;
    box-shadow: 0px 5px 35px #d7d7d7;
    border-radius: 35px;
}
.toggle-btn {
    position: relative;
    width: 145px;
    height: 74px;
    margin: 0 auto;
    border-radius: 40px;
}
input[type="checkbox"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

/* First toggle btn */

#_1st-toggle-btn span {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0px 2px 25px #d9d9d9;
    border-radius: 40px;
    transition: 0.2s ease background-color, 0.2s ease opacity;
}
#_1st-toggle-btn span:before, #_1st-toggle-btn span:after {
    content: '';
    position: absolute;
    top: 8px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    transition: 0.5s ease transform, 0.2s ease background-color;
}
#_1st-toggle-btn span:before {
    background-color: #fff;
    transform: translate(-58px, 0px);
    z-index: 1;
}
#_1st-toggle-btn span:after {
    background-color: #000;
    transform: translate(8px, 0px);
    z-index: 0;
}
#_1st-toggle-btn input[type="checkbox"]:checked+span {
    background-color: #000;
}
#_1st-toggle-btn input[type="checkbox"]:active+span {
    opacity: 0.5;
}
#_1st-toggle-btn input[type="checkbox"]:checked+span:before {
    background-color: #000;
    transform: translate(56px, -19px);
}
#_1st-toggle-btn input[type="checkbox"]:checked+span:after {
    background-color: #fff;
    transform: translate(79px, 0px);
}

/* First toggle btn completed */

/* Second toggle btn */

#_2nd-toggle-btn {
    margin: 60px auto 76px auto;
}
#_2nd-toggle-btn span {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: 8px solid #b3b3b3;
    border-color: #b3b3b3;
    overflow: hidden;
    background-color: #fff;
    border-radius: 40px;
    transition: 0.8s ease border-color;
}
#_2nd-toggle-btn span:before {
    content: '';
    position: absolute;
    top: -8px;
    width: 58px;
    height: 58px;
    border-width: 8px;
    border-style: solid;
    border-color: #b3b3b3;
    margin-left: 0px;
    border-radius: 50%;
    transform: translate(-8px, 0px);
    transition: 0.4s ease border-radius, 0.4s ease transform, 0.6s ease width, 0.6s ease margin-left, 0.8s ease border-color;
}
#_2nd-toggle-btn input[type="checkbox"]:active+span:before {
    width: 80px;
    border-radius: 40px;
}
#_2nd-toggle-btn input[type="checkbox"]:checked:active+span:before {
    margin-left: -22px;
}
#_2nd-toggle-btn input[type="checkbox"]:checked+span {
    border-color: #000;
}
#_2nd-toggle-btn input[type="checkbox"]:checked+span:before {
    border-color: #000;
    transform: translate(63px, 0px);
}

/* Second toggle btn completed */

/* Third toggle btn */

#_3rd-toggle-btn span {
    display: block;
    width: 145px;
    height: 38px;
    background-color: #c7c7c7;
    border-radius: 20px;
    transition: 0.5s ease background-color;
}
#_3rd-toggle-btn span:before {
    content: '';
    position: absolute;
    top: -16px;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 2px 6px 25px #d7d7d7;
    transform: translate(0px, 0px);
    transition: 0.6s ease transform, 0.6s box-shadow;
}
#_3rd-toggle-btn span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    left: 35px;
    width: 0px;
    height: 24px;
    margin-top: -36px;
    margin-left: -6px;
    border: 6px solid #000;
    border-radius: 20px;
    transform: translate(0px, 0px);
    transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;
}
#_3rd-toggle-btn input[type="checkbox"]:checked+span:before {
    box-shadow: 7px 6px 25px #e6e6e6;
    transform: translate(75px, 0px);
}
#_3rd-toggle-btn input[type="checkbox"]:checked+span:after {
    width: 24px;
    border-radius: 50%;
    transform: translate(64px, 0px);
}
#_3rd-toggle-btn input[type="checkbox"]:checked+span {
    background-color: #000;
}

/* Third toggle btn completed */

4 Comments

  1. Thank you for your tremendous effort. csspoints.com is amazing.
    I am taking css tutorials from this site and it really helps me a lot.

  2. […] share daily CSS tutorial with demo and source file you can check how to create Toggle Buttons create using pure css this tutorial very useful for every web […]

  3. Christopher Nemeth
    Christopher Nemeth

    The first toggle button was broken for me. This fixed it for me:

    #_1st-toggle-btn input[type=”checkbox”]:checked+span:before {
    background-color: #000;
    transform: translate(20px, 0px);
    }
    #_1st-toggle-btn input[type=”checkbox”]:checked+span:after {
    background-color: #fff;
    transform: translate(79px, 0px);
    }

Leave a Reply