ICode4Coffee

How to create a toggle button using HTML, CSS, and javascript

By Andre Lombaard | 17 April 2022
Beginner
Switch
Toggle Button
UI

In this beginner tutorial, I will show you how to create a toggle button with HTML, CSS, and javascript. The completed project can be cloned from Github.

The end result

As a first step, let’s create the HTML, CSS, and javascript files for our project. Create an index.html, style.css, and index.js file.

The files needed to create our toggle.
The files needed to create our toggle.

Now that we have created our files let’s ensure that our HTML file uses the CSS and javascript files we created.

<html>

    <head>
        <title>
            Yay or Nay Toggle
        </title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
    </body>

</html>
<script src="index.js"></script>

We include the javascript at the bottom of the HTML file to ensure it executes after the HTML is rendered. Also, ensure that the browser automatically refreshes as you change your files rather than manually refreshing every time you make a change. If you are unsure how to set up your development environment to achieve this, read Automatically refresh the browser while writing HTML for step-by-step instructions.

Let’s add the main toggle button div and give it an id and classes.

<div id="toggle" class="toggle nay-toggle">          
</div>

We use the toggle class to implement the styling applicable for all button states (yay and nay).

.toggle {
    position: relative;
    height: 35px;
    width: 80px;
    border-radius:30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

The nay-toggle class style the toggle button in its nay state.

.nay-toggle {
    background-color: #fef2f2;
    border: 2px solid #fca5a5;
}

The HTML and CSS up to this point should render the following output.

The main toggle button div in nay state
The main toggle button div in its nay state

We also need a class to use when the toggle button is in its yay state.

.yay-toggle {
    background-color: #f0fdf4;
    border: 2px solid #86efac;
}

Later in the tutorial, we will use javascript to switch between the nay-toggle and yay-toggle classes. Next, let’s add the div that will be used to contain the thumbs up and thumbs down icons.

 <div id="toggle" class="toggle nay-toggle">
	<div id="icon-container" class="icon-container nay-icon-container">
	</div>
</div>

Next, we’ll add the styling for the newly added div.

.icon-container {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nay-icon-container {
    position: absolute;
    border: 3px solid #fca5a5;
    background-color: #fecaca;
    left: -5px;
}

.yay-icon-container {
    position: absolute;
    border: 3px solid #86efac;
    background-color: #bbf7d0;
    right: -5px;
}
The output with the new div and styling
The output with the new div and styling

As the last step in constructing the UI, we will add two SVG icons from heroicons. 

<svg id="nay-icon" class="icon nay-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
	viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round"
		d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5" />
</svg>
<svg id="yay-icon" class="icon yay-icon hide" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
	viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round"
		d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
</svg>

And its CSS classes.

.icon {
    height: 30px;
    width: 30px;
}

.nay-icon {
    color: #dc2626;
}

.yay-icon {
    color: #16a34a;
}

.hide {
    display: none;
}

We are now at the stage where we have a toggle button in its nay state, but nothing happens when it’s clicked. Not very useful, is it? So let’s write javascript to make our yay-or-nay toggle button functional.

Our non-functional toggle button
Our non-functional toggle button

We add a click event listener to our toggle button in the javascript. If the button is in its nay state, we remove the nay classes and add the yay classes and vice versa.

let nay = true;

document.getElementById("toggle").addEventListener("click", () => {
    if (nay) {
        document.getElementById("toggle").classList.remove("nay-toggle");
        document.getElementById("icon-container").classList.remove("nay-icon-container");
        document.getElementById("nay-icon").classList.add("hide");
    
        document.getElementById("toggle").classList.add("yay-toggle");
        document.getElementById("icon-container").classList.add("yay-icon-container");
        document.getElementById("yay-icon").classList.remove("hide");
    } else {
        document.getElementById("toggle").classList.remove("yay-toggle");
        document.getElementById("icon-container").classList.remove("yay-icon-container");
        document.getElementById("yay-icon").classList.add("hide");
    
        document.getElementById("toggle").classList.add("nay-toggle");
        document.getElementById("icon-container").classList.add("nay-icon-container");
        document.getElementById("nay-icon").classList.remove("hide");
    }

    nay = !nay;
});

And that’s how to create a toggle button with HTML, CSS, and javascript.

If you feel in any way that this post was helpful, please consider buying me a coffee to help me create more blog posts, videos, and tutorials.

If you want to keep up to date with my latest posts, check out the list of posts on the home page and make sure that you follow icode4coffee on Facebook, Twitter and LinkedIn.

© André Lombaard