Learn how to create stylish toggle switch variants using HTML, CSS, and JavaScript. Step-by-step guide with code examples for beginners.
Table of Contents
A toggle switch is a small user interface (UI) element that allows users to switch between two states, such as ON and OFF. It’s widely used in web forms, settings pages, and mobile apps.
In this blog, we’ll learn how to create toggle switch variants using HTML, CSS, and JavaScript. This is a beginner-friendly guide that helps you build beautiful toggle buttons with animation and interaction.
Prerequisites
Before we begin, make sure you have:
- Basic knowledge of HTML, CSS, and JavaScript
- A code editor like VS Code
- A modern web browser like Chrome or Firefox
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our toggle switch.
Breakdown of the HTML Code
<!DOCTYPE html>- Declares the document type as HTML5.
<html lang="en">- Opens the HTML document with language set to English.
<head> Section
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Switch Variants</title>
<link rel="stylesheet" href="styles.css">
</head><meta charset="UTF-8">: Sets character encoding for the document.<meta name="viewport">: Makes the page responsive on mobile devices.<title>: Sets the page title shown on the browser tab.<link rel="stylesheet">: Links to an external CSS file for styles.
<body> Section
Each toggle is wrapped in a div with class toggle-container.
1. Modern Toggle
<div class="toggle-container">
<label class="toggle-label">Modern Toggle</label>
<div class="toggle-switch toggle-modern off" onclick="toggleSwitch(this)">
<div class="toggle-track">
<div class="toggle-thumb">
<div class="thumb-icon">×</div>
</div>
</div>
</div>
</div>- toggle-container: A wrapper for each toggle switch.
- toggle-label: Displays the name “Modern Toggle”.
- toggle-switch toggle-modern off: The toggle element with specific classes:
- toggle-switch: base style for all switches.
- toggle-modern: style variant.
- off: initial state.
- onclick="toggleSwitch(this)": Calls a JavaScript function when clicked.
- toggle-track: Background track of the toggle.
- toggle-thumb: Movable switch knob.
- thumb-icon: Shows a symbol (×) inside the toggle thumb.
2. Liquid Toggle
<div class="toggle-container">
<label class="toggle-label">Liquid Toggle</label>
<div class="toggle-switch toggle-liquid off" onclick="toggleSwitch(this)">
<div class="toggle-track">
<div class="toggle-thumb">
<div class="liquid-effect"></div>
</div>
</div>
</div>
</div>Similar structure but:
- Uses toggle-liquid class for a liquid animation effect.
- Includes a liquid-effect element inside the thumb for animated styling.
3. Morphing Toggle
<div class="toggle-container">
<label class="toggle-label">Morphing Toggle</label>
<div class="toggle-switch toggle-morphing off" onclick="toggleSwitch(this)">
<div class="toggle-track">
<div class="toggle-thumb">
<div class="morph-shape"></div>
</div>
</div>
</div>
</div>- Uses toggle-morphing for a morphing shape animation.
- Contains a morph-shape element for visual shape changes.
Script Inclusion
<script src="script.js"></script>Links to an external JavaScript file that contains the toggleSwitch(this) function. This function:
- Toggles between ON/OFF states.
- Changes styles or animations dynamically.
Step 2 (CSS Code):
Once the basic HTML structure of the toggle switch is in place, the next step is to add styling to the toggle switch using CSS. Let’s break it down section by section:
General Styles
body {
font-family: Arial, sans-serif;
padding: 40px;
display: flex;
gap: 50px;
flex-wrap: wrap;
}- Sets basic font, padding, and layout for the body.
- Uses flex to arrange toggles in a row with spacing and wraps to the next line if needed.
.toggle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}- Each toggle (label + switch) is stacked vertically and centered.
.toggle-label {
font-size: 14px;
font-weight: 600;
color: #374151;
}- Styles the label text above each toggle.
.toggle-switch {
cursor: pointer;
transition: all 0.3s ease;
}- Makes the toggle switch clickable with smooth transition.
Shared Thumb Style
.toggle-thumb {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}- The thumb is absolutely positioned and centered content-wise. Each toggle reuses this base style.
1. Modern Toggle
.toggle-modern .toggle-track {
width: 60px; height: 32px;
background: #e5e7eb; border-radius: 16px;
position: relative;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}- The track is a rounded bar with a soft shadow.
.toggle-modern.on .toggle-track {
background: gradient blue; stronger shadow;
}- On toggle: color changes to gradient blue with glowing shadow.
.toggle-modern .toggle-thumb {
width: 28px; height: 28px;
background: white; border-radius: 50%;
top: 2px; left: 2px;
box-shadow: soft;
}- White circular thumb positioned slightly inside the track.
.toggle-modern.on .toggle-thumb {
transform: translateX(28px);
}- Slides the thumb to the right when toggled on.
.thumb-icon {
font-size: 12px; font-weight: bold;
color: grayish;
}
.toggle-modern.on .thumb-icon {
color: blue;
}- The icon inside the thumb changes color on toggle.
2. Liquid Toggle
.toggle-liquid .toggle-track {
width: 70px; height: 36px;
background: #f1f5f9; border-radius: 18px;
overflow: hidden;
}- Slightly bigger and softer look with overflow hidden (for effects).
.toggle-liquid.on .toggle-track {
background: purple gradient;
}.toggle-liquid .toggle-thumb {
width: 32px; height: 32px;
background: white; border-radius: 50%;
top: 2px; left: 2px;
box-shadow: more prominent;
transition: bouncy with cubic-bezier;
}
.toggle-liquid.on .toggle-thumb {
transform: translateX(34px);
background: yellow-orange;
}- Bouncy animation on toggle, thumb color also changes.
.liquid-effect {
position: absolute;
background: inherit;
border-radius: 50%;
transform: scale(0);
transition: all 0.4s ease;
}
.toggle-liquid.on .liquid-effect {
transform: scale(1.5);
opacity: 0.3;
animation: liquidRipple 0.6s ease;
}
@keyframes liquidRipple {
0% { scale 0, opacity 0.8 }
100% { scale 2, opacity 0 }
}- A ripple effect appears behind the thumb to simulate a liquid splash.
3. Morphing Toggle
.toggle-morphing .toggle-track {
width: 80px; height: 36px;
background: light gray;
border: 2px solid #e2e8f0;
border-radius: 20px;
}
.toggle-morphing.on .toggle-track {
background: green gradient;
border-radius: 8px;
}- On toggle: shape and color morph to look sharper and greener.
.toggle-morphing .toggle-thumb {
width: 36px; height: 36px;
background: #64748b (grayish);
border-radius: 50%;
}
.toggle-morphing.on .toggle-thumb {
transform: translateX(44px);
background: white;
border-radius: 8px;
}- Thumb moves right and becomes a rounded rectangle.
.morph-shape {
width: 20px; height: 20px;
background: white; border-radius: 50%;
position: relative;
}
.morph-shape::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 8px; height: 8px;
background: gray;
border-radius: 50%;
transform: translate(-50%, -50%);
}- Inside the thumb, there's a shape that morphs too.
.toggle-morphing.on .morph-shape {
border-radius: 4px;
background: green;
}
.toggle-morphing.on .morph-shape::before {
width: 12px; height: 6px;
background: white;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 0;
}- Morphs the inner shape into a small white checkmark-style bar.
body {
font-family: Arial, sans-serif;
padding: 40px;
display: flex;
gap: 50px;
flex-wrap: wrap;
}
.toggle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.toggle-label {
font-size: 14px;
font-weight: 600;
color: #374151;
}
.toggle-switch {
cursor: pointer;
transition: all 0.3s ease;
}
/* Shared Thumb */
.toggle-thumb {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
/* --------------------- MODERN --------------------- */
.toggle-modern .toggle-track {
width: 60px;
height: 32px;
background: #e5e7eb;
border-radius: 16px;
position: relative;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-modern.on .toggle-track {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
0 0 20px rgba(59, 130, 246, 0.3);
}
.toggle-modern .toggle-thumb {
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
top: 2px;
left: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.toggle-modern.on .toggle-thumb {
transform: translateX(28px);
}
.thumb-icon {
font-size: 12px;
font-weight: bold;
color: #6b7280;
}
.toggle-modern.on .thumb-icon {
color: #3b82f6;
}
/* --------------------- LIQUID --------------------- */
.toggle-liquid .toggle-track {
width: 70px;
height: 36px;
background: #f1f5f9;
border-radius: 18px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.toggle-liquid.on .toggle-track {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
.toggle-liquid .toggle-thumb {
width: 32px;
height: 32px;
background: white;
border-radius: 50%;
top: 2px;
left: 2px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle-liquid.on .toggle-thumb {
transform: translateX(34px);
background: #fbbf24;
}
.liquid-effect {
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
transform: scale(0);
transition: all 0.4s ease;
}
.toggle-liquid.on .liquid-effect {
transform: scale(1.5);
opacity: 0.3;
animation: liquidRipple 0.6s ease;
}
@keyframes liquidRipple {
0% {
transform: scale(0);
opacity: 0.8;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* --------------------- MORPHING --------------------- */
.toggle-morphing .toggle-track {
width: 80px;
height: 36px;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 20px;
position: relative;
transition: all 0.5s ease;
}
.toggle-morphing.on .toggle-track {
background: linear-gradient(135deg, #10b981, #059669);
border-color: #10b981;
border-radius: 8px;
}
.toggle-morphing .toggle-thumb {
width: 36px;
height: 36px;
background: #64748b;
top: 0px;
left: 0px;
border-radius: 50%;
transition: all 0.5s ease;
}
.toggle-morphing.on .toggle-thumb {
transform: translateX(44px);
background: white;
border-radius: 8px;
}
.morph-shape {
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: all 0.5s ease;
position: relative;
}
.morph-shape::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: #64748b;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.toggle-morphing.on .morph-shape {
border-radius: 4px;
background: #10b981;
}
.toggle-morphing.on .morph-shape::before {
width: 12px;
height: 6px;
background: white;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 0;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript to toggle the state of a custom switch UI element.
Function Definition
function toggleSwitch(el) {- This defines a function called toggleSwitch.
- It takes one parameter el, which is expected to be an HTML element representing a toggle switch.
Toggle Classes
el.classList.toggle('on');
el.classList.toggle('off');- These two lines toggle the presence of the on and off classes.
- If on is present, it removes it; otherwise, it adds it.
- Same goes for off.
- This is what visually switches the toggle state between active (on) and inactive (off).
Special Handling for "toggle-modern"
if (el.classList.contains('toggle-modern')) {- Checks if the toggle switch has the class toggle-modern, meaning it's a modern-style switch.
- If true, we apply special logic to update the icon/text inside the switch.
Set Icon Based on State
const icon = el.querySelector('.thumb-icon');
icon.textContent = el.classList.contains('on') ? '✓' : '×';- Finds the .thumb-icon element inside the toggle.
- Sets its text to:
- ✓ (checkmark) if the switch is ON.
- × (cross) if the switch is OFF.
function toggleSwitch(el) {
el.classList.toggle('on');
el.classList.toggle('off');
if (el.classList.contains('toggle-modern')) {
const icon = el.querySelector('.thumb-icon');
icon.textContent = el.classList.contains('on') ? '✓' : '×';
}
}Final Output:
Conclusion:
Creating different toggle switch variants is easy using HTML, CSS, and JavaScript. You can make your UI interactive and attractive by customizing styles, shapes, and animations.
By following this guide, you’ve learned:
- How to build a basic toggle switch
- How to add styling with CSS
- How to use JavaScript to detect switch changes
- How to make new variants with different sizes and colors
Keep experimenting with your designs and try to build more creative toggle switches for your projects!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: how to create toggle switch using html css and javascript, different types of toggle switch ui components, create toggle switch variants for website design, step-by-step toggle switch tutorial for beginners, toggle switch, ui component, switch button
End of the article
