.form {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  padding: 10px 0;
  width: 260px;
  transform: translate3d(-50%,-50%,0);
}

.form:before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  height: 100%;
  width: 120px;
  background-color: #243548;
  border-radius: 50%;
  box-shadow: 75px 0 0 #243548, 150px 0 0 #243548;
}

.form:after {
  content: '';
  position: absolute;
  top: -94px;
  left: 70px;
  height: 100%;
  width: 120px;
  border-radius: 50%;
}

.form input {
  position: absolute;
  left: -9999px;
}

.bubble {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  transform: translate3d(-75%,-50%,0);
  margin-left: -50px;
  background: #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  border-right: 0px solid #BBBBBB;
  border-left: 0px solid #BBBBBB;
  animation: toggle-reverse 2s 1;
}

#bubble:checked + .bubble {
  animation: toggle 2s 1;
  transform: translate3d(75%,-50%,0);
  background: #3CCC97;
}

.bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: 500ms ease all 1.25s;
}

.bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(-45deg);
  border-radius: 2px;
  transition: 500ms ease all 1.25s;
}

#bubble:checked + .bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: 5px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(225deg);
  border-radius: 2px;
}

#bubble:checked + .bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -7px;
  margin-left: -10px;
  height: 20px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(-215deg);
  border-radius: 2px;
}

@keyframes toggle {
  0% {
    transform: translate3d(-75%,-50%,0);
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    background: #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 100px;
  }

20% {
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(-75%,-50%,0);
    height: 100px;
  }

40% {
    border-left: 0 solid #BBBBBB;
    border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
    height: 90px;
  }

50% {
    transform: translate3d(0%,-50%,0);
    border-right: 25px solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    background: #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 90px;
  }

75% {
    border-left: 25px solid #3CCC97;
    border-color: #3CCC97;
    background: #3CCC97;
    border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
    height: 90px;
  }

100% {
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(75%,-50%,0);
    height: 100px;
    width: 100px
  }
}

@keyframes toggle-reverse {
  0% {
    transform: translate3d(75%,-50%,0);
    background: #3CCC97;
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 100px;
  }

20% {
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(75%,-50%,0);
    height: 100px;
  }

40% {
    border-right: 0 solid #3CCC97;
    border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
    height: 90px;
  }

50% {
    transform: translate3d(0%,-50%,0);
    border-left: 25px solid #3CCC97;
    border-right: 0 solid #3CCC97;
    background: #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 90px;
  }

75% {
    border-right: 25px solid #BBBBBB;
    border-color: #BBBBBB;
    background: #BBBBBB;
    border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
    height: 90px;
  }

100% {
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(-75%,-50%,0);
    height: 100px;
    width: 100px
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Bubble Toggle Switch with Pure HTML and CSS

If you’re looking for a visually captivating way to design a toggle switch without using JavaScript, this animated bubble-style toggle switch made entirely with HTML and CSS is a perfect solution. It offers a modern, smooth animation that enhances the user interface of any website.

This toggle animation features an organic, “blob-like” movement that transforms beautifully when toggled. The switch morphs between two states — inactive and active — with animated rotation and color changes, creating a professional and interactive experience.

How It Works

This toggle switch is built using only three HTML elements:

A hidden <input> checkbox
A <label> styled as a bubble
A container <div> for layout

When the checkbox is checked or unchecked, CSS animations are triggered to transition the bubble’s position, shape, and color. The use of @keyframes makes the animation smooth and expressive, and :checked selectors control the switch state.

Key Features

1. No JavaScript Required

This switch relies completely on HTML and CSS. The hidden checkbox input acts as the state manager, while sibling selectors in CSS (#bubble:checked + .bubble) handle all visual transitions.

2. Blob-like Movement

The animation mimics a “liquid” stretching and snapping effect as the toggle transitions between sides. This effect is created using:

Border-radius manipulations
CSS transitions
Keyframe animations

3. Morphing Check Icon

On switching, two white bars rotate and shift to form a check mark. This is handled using CSS ::before and ::after pseudo-elements.

4. Customizable Colors

You can easily update the toggle’s active and inactive colors:

Default (gray): #BBBBBB
Active (green): #3CCC97
Just change these values in the CSS to match your brand.

Where to Use This Toggle

This animated bubble switch is ideal for:

Dark mode/light mode toggles
On/off controls in settings menus
Signup form preferences
Any UI requiring a custom toggle without JavaScript

Why Choose a CSS-Only Toggle?

Using a CSS-only toggle reduces dependencies, improves loading time, and works great in static sites or environments where JavaScript isn’t preferred (like email templates or minimal frameworks).

Final Thoughts

This bubble toggle switch with animation proves how powerful CSS alone can be for creating rich, dynamic interfaces. It’s lightweight, responsive, and visually engaging — perfect for developers and designers aiming for modern, fluid UI without extra libraries.

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.