.container {
  --UnChacked-color: hsl(0, 0%, 10%);
  --chacked-color: hsl(216, 100%, 60%);
  --font-color: white;
  --chacked-font-color: var(--font-color);
  --icon-size: 1.5em;
  --anim-time: 0.2s;
  --anim-scale: 0.1;
  --base-radius: 0.8em;
}

.container {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  fill: var(--font-color);
  color: var(--font-color);
}

/* Hide the default checkbox */
.container input {
  display: none;
}

/* Base custom checkbox */
.checkmark {
  background: var(--UnChacked-color);
  border-radius: var(--base-radius);

display: flex;
  padding: 0.5em;
}
.icon {
  width: var(--icon-size);
  height: auto;
  filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25));
}
.name {
  margin: 0 0.25em;
}
.Yes {
  width: 0;
}
.name.Yes {
  display: none;
}

/* action custom checkbox */
.container:hover .checkmark,
.container:hover .icon,
.container:hover .name {
  transform: scale(calc(1 + var(--anim-scale)));
}

.container:active .checkmark,
.container:active .icon,
.container:active .name {
  transform: scale(calc(1 - var(--anim-scale) / 2));
  border-radius: calc(var(--base-radius) * 2);
}
.checkmark::before {
  content: "";
  opacity: 0.5;
  transform: scale(1);
  border-radius: var(--base-radius);
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.checkmark:hover:before {
  background-color: hsla(0, 0%, 50%, 0.2);
}
.container input:checked + .checkmark:before {
  animation: boon calc(var(--anim-time)) ease;
  animation-delay: calc(var(--anim-time) / 2);
}

/* When the checkbox is checked*/
.container input:checked + .checkmark {
  --UnChacked-color: var(--chacked-color);
  fill: var(--chacked-font-color);
  color: var(--chacked-font-color);
}

.container input:checked ~ .checkmark .No {
  width: 0;
}
.container input:checked ~ .checkmark .name.No {
  display: none;
}

.container input:checked ~ .checkmark .Yes {
  width: var(--icon-size);
}
.container input:checked ~ .checkmark .name.Yes {
  width: auto;
  display: unset;
}

/*Animation*/
.container,
.checkmark,
.checkmark:after,
.icon,
.checkmark .name {
  transition: all var(--anim-time);
}

/*Unuse*/
@keyframes icon-rot {
  50% {
    transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale)));
    border-radius: 1em;
  }
  to {
    transform: rotate(360deg);
    border-radius: var(--base-radius);
  }
}
/*Unuse*/
@keyframes boo {
  80% {
    transform: scale(1.4);
  }
  99% {
    transform: scale(1.7);
    border: 2px solid var(--UnChacked-color);
  }
  to {
    transform: scale(0);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Stylish Toggle Switch with SVG Icons Using HTML & CSS

Looking to enhance your forms or interactive UI with a toggle switch that’s more than just a checkbox? This custom-designed toggle switch with SVG icons and text labels delivers a smooth and engaging user experience — all crafted with pure HTML and CSS.

In this tutorial, we’ll show you how to create a visually appealing toggle that switches between two options (like “Ball” and “Game”) using SVG icons, animated scaling, and color transitions.

What This Toggle Switch Does

This component replaces the default browser checkbox with a beautifully styled custom toggle. Here’s what happens when users interact with it:

On hover: Elements scale slightly for a playful, responsive feel.
On click: The toggle smoothly switches between two states.
Icons and labels update to reflect the chosen state (e.g., “Ball” vs. “Game”).
Background and font colors animate for visual feedback.
SVG icons enhance accessibility and design flexibility.

Key Features of the Design

1. Hidden Native Checkbox

The input checkbox is completely hidden using display: none, while CSS controls the visible elements.

2. Custom Checkmark Container

The visible checkmark area houses:

A default icon and label (e.g., “Ball”)
An alternative icon and label (e.g., “Game”)
Smooth transitions for switching between both states

3. SVG Icon Integration

Both states use SVG icons for scalability and styling:

Icons are set with viewBox and responsive width
Shadow effects are applied using filter: drop-shadow

4. Hover and Active Animation

CSS transform: scale() and transition properties add delightful interactivity:

Slight zoom on hover
Shrinking and rounded corners on active click

5. Theme Customization with CSS Variables

The design relies heavily on CSS variables like:

--UnChacked-color for the default state
--chacked-color for the active (checked) state
--icon-size, --base-radius, and --anim-time for consistent styling and timing

This approach makes the toggle extremely easy to tweak and reuse in other UI components.

Where to Use This Toggle Switch

This toggle button is ideal for:

Forms where users must choose between two options (like dark/light mode, male/female, etc.)
Settings pages or preference panels
Game or quiz UI, where users choose categories or themes
Mobile web apps for compact, touch-friendly interactivity

Why This Toggle Stands Out

Pure HTML and CSS — no JavaScript needed
Customizable color scheme using CSS variables
Fast performance with smooth animations
Accessible and scalable via SVG and modern layout

Try It Yourself

Want to experiment with the styling? You can:

Change the icon SVGs to match your content
Customize the checked/un-checked labels
Adjust animation duration and scale factors for different UX feels

This toggle design is a solid blend of creativity and usability, perfect for modern, minimal web interfaces.

Final Thoughts

Creating engaging UI components doesn’t always require JavaScript. With just HTML and CSS, you can build dynamic, beautiful elements like this toggle switch — combining SVG graphics, hover states, and smooth transitions into a polished user experience.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.