DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Designyff
Designyff

Posted on • Originally published at designyff.com

ON/OFF Toggle button β€” step-by-step guide

Toggle button.

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS

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

.text {
    font-size: 23px;
    color: #494949;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

And that’s it.

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

Thank you for reading. ❀️

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt

Hello ! Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
designyff profile image
Designyff

Didn't know that! Thank you! πŸ’₯πŸ‘

Create an Account!
Now it's your turn!
Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.