#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.9em;
  font-weight: 700;
  color: rgb(37, 37, 37);
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}

.svg {
  position: relative;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg path {
  fill: rgb(37, 37, 37);
}

#checkbox:checked + .switch .svg {
  filter: drop-shadow(0px 0px 3px rgb(222, 151, 255));
}

#checkbox:checked + .switch .svg path {
  fill: rgb(255, 255, 255);
}

#checkbox:checked + .switch {
  box-shadow: 0px 0px 1px rgb(222, 151, 255) inset,
      0px 0px 2px rgb(222, 151, 255) inset,
      0px 0px 10px rgb(222, 151, 255) inset,
      0px 0px 40px rgb(222, 151, 255),
      0px 0px 100px rgb(222, 151, 255),
      0px 0px 5px rgb(222, 151, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(152, 107, 172);
  color: rgb(255, 255, 255);
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Glowing Padlock Toggle Switch Using HTML and CSS

Creating intuitive and eye-catching toggle switches can greatly enhance user interaction on your website. In this tutorial, we’ll walk through how a circular padlock-style toggle switch is built using just HTML and CSS — with no JavaScript required.

This unique toggle not only acts as a clickable switch but also features glow effects, icon color transitions, and custom styling when activated, making it a great fit for modern UI designs.

What Is a Toggle Switch?

A toggle switch is a common interface element used to turn a feature on or off. This design uses a hidden checkbox input paired with a stylized <label> element that acts as the switch. When the user clicks the label, the checkbox toggles between its checked and unchecked state, and CSS handles the rest — changing visuals and behavior accordingly.

How It Works

1. Checkbox Hidden, Label Styled as Button

The <input type="checkbox"> is hidden using display: none. Instead, the adjacent <label> styled with the class switch becomes the visible interactive element.

2. Circular Design with Icon

The toggle button is a circular shape (90px x 90px) with a central SVG icon representing a padlock or similar symbol. It’s styled to look like a button, with shadows and border effects for depth.

3. Glow and Color Change on Activation

When the checkbox is checked:

The background color changes
A glow effect appears around the circle using multiple layered box-shadow properties
The icon changes color, and its drop-shadow adds visual feedback

These changes are made possible using the :checked selector in combination with the adjacent sibling (+) combinator.

Visual Features of the Switch

Inactive State:
- Gray background
- Dark-colored icon
- Subtle inset shadow
Active (Checked) State:
- Light purple background
- White icon
- Bright glowing outer and inner shadows
- A glowing border and color contrast for improved visibility

This design gives the appearance of a power button or start switch, making it great for toggling animations, dark mode, or sound effects.

Use Cases

You can use this toggle switch in various UI components, such as:

Start/Stop switches
Mode toggles (e.g., light/dark themes)
Power controls in games or simulations
Interactive panels in dashboards or admin templates

Its animated, glowing design is ideal for projects where you want to add a touch of modern UI flair.

Learning Outcome

By studying and modifying this example, you’ll learn:

How to create a functional toggle with pure HTML and CSS
How to use the :checked selector for interactive styles
How to apply layered box-shadow effects for glowing visuals
How to use SVG icons inside buttons for better design control

Conclusion

This glowing padlock toggle switch demonstrates how effective pure CSS can be for creating interactive components. It’s simple, elegant, and completely customizable — a great addition to any front-end developer’s toolkit.

Whether you’re building a control panel, a user settings page, or just learning how to use advanced CSS selectors, this toggle switch offers a fun and rewarding hands-on learning 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.