.toggle-container {
  position: relative;
  width: 160px;
  height: 80px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 60px;
  background: #ff4c4c;
  border-radius: 30px;
  box-shadow: 0 5px #b93737;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  padding: 0 10px;
}

.face {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.eye {
  position: relative;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.smile {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 40px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
}

.toggle-switch {
  position: relative;
  width: 35px;
  height: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
  z-index: 1;
}

.toggle-switch:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff4c4c;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
}

.toggle-input:checked + .toggle-label .toggle-switch:before {
  background: #28a745;
  left: 16px;
}

.toggle-input:checked + .toggle-label .smile {
  border-bottom-color: #fff;
  border-top: none;
  bottom: 10px;
}

.toggle-input:not(:checked) + .toggle-label .smile {
  border-top-color: #fff;
  border-bottom: none;
  bottom: 0;
}

.toggle-input:checked + .toggle-label {
  background: #ced10a;
  box-shadow: 0 5px #74c027;
}

.toggle-input:not(:checked) + .toggle-label {
  background: #252422;
  box-shadow: 0 5px #484d48;
  bottom: 5px;
}

.toggle-label:hover .eye {
  width: 20px;
  height: 20px;
}

@keyframes blink {
  0%,
  90%,
  100% {
    height: 10px;
  }
  95% {
    height: 2px;
  }
}

.left-eye {
  animation: blink 3s infinite;
}

.right-eye {
  animation: blink 3s infinite;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Fun Animated Toggle Switch with Face Expression Using HTML & CSS

Creating an engaging user interface doesn’t always require complex JavaScript. With just HTML and CSS, you can build playful, interactive elements that enhance the user experience. One great example is the animated toggle switch with a face — a unique way to make a boring checkbox both functional and fun.

In this blog post, we’ll explore how this toggle switch works and how it responds with expressive animations using only HTML and CSS.

What Is This Toggle Switch?

This toggle switch is more than just a checkbox. It features:

A switch knob that changes color and position when toggled.
A smiley face that changes expression — happy when turned on, neutral when off.
Blinking eyes that give the switch personality.
Color transitions and subtle shadows for a modern feel.

This switch is ideal for settings toggles, dark/light mode buttons, or just to add delight to any project.

How the Toggle Switch Works

Let’s break down its key features:

1. Checkbox Input with Hidden Style

The core functionality is based on a standard HTML checkbox input. It’s hidden using display: none and controlled via a label.

2. Label as the Interactive Surface

The label acts as the visual toggle. It includes:

A face container
Two eyes
A switch element in the middle
A smile that animates based on state

When the user clicks the label, the checkbox toggles between checked and unchecked states.

3. Color Transitions and Expressions

Using the :checked pseudo-class, different styles are applied:

Switch color changes from red to green
Face background shifts between dark and light themes
Smile shape flips direction to show mood
Shadow effects enhance the overall look

This creates a visually dynamic toggle switch without any JavaScript.

4. Blinking Eyes

The left and right eyes blink every 3 seconds using keyframe animations. This adds life to the UI and engages users playfully.

Why This Toggle Design Stands Out

Visual feedback: The animated smile and color changes show the state clearly.
User engagement: A fun design keeps users interacting longer.
No JavaScript: Entirely powered by HTML and CSS.
Customizable: You can easily change colors, shapes, or even replace the face with another character.

Where You Can Use This Toggle

This switch is great for:

Dark mode toggles
Profile settings
Fun web games
Kid-friendly educational websites
Any project where UX should feel a little more human

Practice & Customize Online – Free of Cost

Using the Learn Code Online Free Of Cost tool, you can:

See how the toggle works live
Tweak the code in real time
Change the face, animation speed, or smile size
Learn by doing — no installations or signups needed

Conclusion

This animated toggle switch shows the creative power of HTML and CSS when combined thoughtfully. Whether you’re building a fun personal site or looking for fresh UI ideas, adding small interactive details like this can make a big difference.

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.