/*       _                                                                       _               */
/*      (_ )                                                                    ( )              */
/*   _ _ | |   _ _ _   _ _ __   ___       _ _     _ _   __    __   ___         _| |  __  _   _   */
/* / _  )| | / _  ) ) ( )  __)/ ___)     (  _ \ / _  )/ _  \/ __ \  __)      / _  |/ __ \ ) ( )  */
/*( (_| || |( (_| | (_) | |  ( (___   _  | (_) ) (_| | (_) |  ___/__  \  _  ( (_| |  ___/ \_/ |  */
/* \__ _)___)\__ _)\__  |_)   \____) (_) |  __/ \__ _)\__  |\____)____/ (_)  \__ _)\____)\___/   */
/*                ( )_| |                | |         ( )_) |                                     */
/*                 \___/                 (_)          \___/                                      */

.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.slider:before {
  position: absolute;
  content: ":P"; /* first emoji!! :P */
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: #ff0000; /* change to red */
  animation: glitch 0.3s infinite;
}

.switch input:checked + .slider:before {
  content: ">:("; /* second emoji when the slider is on */
  color: black;
  transform: translateX(1.5em);
}

/* shakes */
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

/* extra shake crap remove if you want */

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  50% {
    transform: translate(5px, -5px) rotate(5deg);
  }
  75% {
    transform: translate(-5px, -5px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Fun Toggle Switch with Emoji Animation Using HTML & CSS

Creating interactive UI components with pure HTML and CSS is both efficient and enjoyable. In this tutorial, you’ll learn how to build a playful toggle switch that changes its appearance and emoji expression when activated. This switch is animated, responsive, and doesn’t require JavaScript.

What Does This Toggle Switch Do?

This toggle switch mimics a padlock-style slider with a twist — it changes the emoji face based on whether the switch is on or off. Here’s what happens when you interact with it:

The default (unchecked) state shows a :P emoji on a light gray background.
When toggled (checked), it switches to a red background and displays a >:( emoji.
The entire switch shakes briefly, giving a fun and animated “glitch” effect.

Key Features of This Design

1. Custom Emoji Faces

Instead of traditional toggle icons, this switch uses emoji characters to add personality. It’s a creative approach to user interaction — great for fun projects or playful websites.

2. Smooth Sliding Animation

The .slider:before element uses transform: translateX() to move the face across the slider, giving a smooth sliding effect when toggled.

3. Glitch Effect on Activation

The @keyframes glitch animation adds a fast, shaking motion to the slider when it’s turned on. This effect enhances the interactivity and gives the switch a more dynamic appearance.

4. Pure HTML & CSS — No JavaScript Required

Everything is built with just a <label>, an <input type="checkbox">, and styled with CSS. This keeps the code lightweight and easy to maintain.

How This Toggle Works

The checkbox input is hidden using opacity: 0.
The visible part is the .slider span, styled with rounded edges and a soft box shadow.
The :before pseudo-element creates the face (emoji), which moves when the checkbox is checked.
Using the adjacent sibling selector (input:checked + .slider), the appearance and content are updated dynamically when toggled.

Use Cases for This Toggle Switch

This kind of toggle switch is perfect for:

Fun personal portfolio sites
Playful themes for kids’ educational platforms
Creative web design challenges
Lighthearted forms or games

Final Thoughts

This creative toggle switch is a great example of how CSS can be used to build expressive and interactive elements without JavaScript. By combining transitions, transforms, pseudo-elements, and emoji content, you can make your UI stand out with personality and motion.

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.