ON/OFF Toggle button — step-by-step guide

HTML

For HTML we have a circle which triggers a toggle() function on click and “FF” text, which will change to “N” and vice versa.

<div class="container">
    <div class="toggle" onclick="toggle()">
        <div class="circle"></div>
    </div>
    <span class="text">FF</span>
</div>

JAVASCRIPT

For javascript, first we’ll create a variable in which we’ll store toggle status.

We’ll set it to false for now.

let active = false

Now we’ll create a toggle function, which will be triggered on circle click.

At the beginning, we are selecting the toggle and text element using querySelector method.

Then we’ll change the active status to the opposite of it’s current value, by setting the exclamation mark (“!”) in front of it (!active). If active was true, it will now become false and vice versa.

Now, if active is true, we’ll add the active class to toggle element and change “FF” text to “N”.

If it’s false, we’ll remove active class from toggle element and set text to “FF”.

function toggle() {
    let toggle = document.querySelector('.toggle')
    let text = document.querySelector('.text')
    active = !active
    if (active) {
        toggle.classList.add('active')
        text.innerHTML = 'N'
    } else {
        toggle.classList.remove('active')
        text.innerHTML = 'FF'
    }
}

CSS

For CSS, we’ll start by setting font size and color to text element.

.text {
    font-size: 23px;
    color: #494949;
}

Toggle element will be positioned relative with 40x20px size (twice as wide as circle — which we’ll set later).

We’ll set rounded border to dark dray as if toggle is off.
Then we’ll display everything in center using flexbox.

Lastly, I’m setting cursor to pointer, because this element is clickable, triggers the on/off button, and I’m adding transition so that toggle is nice and smooth.

.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border: 2px solid #494949;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

Circle will be positioned absolute with left set to zero. This is the off status.We’ll set the width and height to 20 pixels (half width of it’s parent).

Now add some border radius and set the background color to dark grey. This color will become green when toggle is clicked.

Don’t forget the transition.

.circle {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #494949;
    transition: .3s;
}

Now we’re styling the active class.This class is added to toggle element when active status.

We’ll just set the border color to green.

.active {
    border-color: rgb(85, 227, 180);
}

Now we’ll select the sibling using the plus selector (“+“) and set it’s color to green. We are talking about “N” text here.

.active + .text {
    color: rgb(85, 227, 180);
}

Lastly, we’ll style the circle when active.

We’ll move it to the right side of it’s container by setting the left property to 100% and translate X by -100%.

We’ll also change the background color to green and add some transition.

.active .circle {
    left: 100%;
    transform: translateX(-100%);
    transition: .3s;
    background-color: rgb(85, 227, 180);
}

And that’s it.

You can find the video tutorial and the source code here.

Thank you for reading. ❤️