:root {
  --bubbleTiming: cubic-bezier(0.5,0.15,0.25,1.75);
  font-size: calc(40px + (60 - 40) * (100% - 320px) / (1280 - 320));
}

label, .bubble {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

label {
  animation: float 4s ease-in-out infinite;
}

.bubble, .bubble:before, .bubble:after {
  transition-duration: 0.2s;
}

.bubble, .bubble:after {
  border-radius: 50%;
}

.bubble {
  background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%);
  box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset,
		0 -0.15em 0.4em hsl(0,90%,45%) inset,
		0 0.05em 0.05em hsl(0,90%,45%) inset,
		0.05em 0 0.1em hsl(0,90%,100%) inset,
		-0.05em 0 0.1em hsl(0,90%,100%) inset,
		0 0.1em 0.4em hsl(0,90%,60%) inset;
  cursor: pointer;
  position: relative;
  width: 3em;
  height: 3em;
  transform-style: preserve-3d;
  transition-property: box-shadow, transform, width, height;
  transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming);
  will-change: transform;
  -webkit-appearance: none;
  appearance: none;
  z-index: 0;
}

.bubble:before, .bubble:after {
  content: "";
  display: block;
  position: absolute;
  transition-timing-function: var(--bubbleTiming);
}

.bubble:before {
  border-radius: 0.75em;
  box-shadow: 0 0 0 0.5em hsl(0,0%,100%) inset;
  filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate3d(-50%,-50%,-1px);
  z-index: -1;
}

.bubble:after {
  background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%);
  filter: blur(4px);
  top: 0.6em;
  left: 0.6em;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,-1px);
  z-index: -2;
}

.bubble:focus, .bubble:hover {
  transform: scale(1.1);
  outline: none;
}

.bubble:focus:active, .bubble:hover:active {
  width: 3.6em;
  height: 2.4em;
}

.bubble:focus:before, .bubble:hover:before {
  filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2));
}

.bubble:focus:after, .bubble:hover:after {
  transform: translate3d(0.15em,0.15em,-1px);
}

.bubble:checked {
  box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset,
		0 -0.15em 0.4em hsl(120,90%,45%) inset,
		0 0.05em 0.05em hsl(120,90%,45%) inset,
		0.05em 0 0.1em hsl(120,90%,100%) inset,
		-0.05em 0 0.1em hsl(120,90%,100%) inset,
		0 0.1em 0.4em hsl(120,90%,60%) inset;
}

.bubble:checked:before {
  border-radius: 0.25em;
  width: 0.5em;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  label {
    animation: none;
  }

.bubble, .bubble:before, .bubble:after {
    transition-duration: 0s;
  }

.bubble:focus, .bubble:hover {
    transform: scale(1);
  }

.bubble:focus:active, .bubble:hover:active {
    width: 3em;
    height: 3em;
  }

.bubble:focus:before, .bubble:hover:before {
    filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  }

.bubble:focus:after, .bubble:hover:after {
    transform: translate3d(0,0,-1px);
  }
}
/* Animations */
@keyframes float {
  from, to {
    transform: translate(0,3%);
  }

25% {
    transform: translate(-3%,0);
  }

50% {
    transform: translate(0,-3%);
  }

75% {
    transform: translate(3%,0);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Bubble Checkbox Animation Using Only HTML & CSS

Want to make your website more fun and engaging with an interactive UI element? This bubble-style checkbox is a unique, animated toggle button built entirely with HTML and CSS — no JavaScript required.

The effect is sleek, modern, and fully responsive. It creates a bubbly, squishy interaction when users click, hover, or toggle the checkbox. Perfect for websites that need a playful or creative user experience.

What Is a Bubble Checkbox?

The bubble checkbox is a stylized input element that transforms a traditional checkbox into a 3D-like bubble with layered effects. It visually responds to user interaction in multiple ways:

Hover: The bubble grows slightly and adjusts its shadow.
Active (click): The shape transforms into an oval as if squished.
Checked: The bubble fills with a green glow to indicate it’s active.

All these animations are controlled using CSS pseudo-elements, radial gradients, and custom transitions.

How the Effect Works

This advanced effect uses several modern CSS techniques:

1. Custom Properties & Transitions

CSS variables (--bubbleTiming) define the timing function for smooth transitions. The bubble scales, stretches, and casts shadows as it reacts to user input.

2. Radial Gradients for Lighting

Multiple radial gradients are layered to simulate reflections, giving the bubble a shiny, dimensional appearance.

3. Pseudo-elements (`::before` and `::after`)

::before: Adds a glossy inner circle or “highlight.”
::after: Adds depth with a subtle shadow beneath the bubble.

4. Checked State Animation

When toggled, the bubble’s colors and box shadows shift to vibrant green tones — clearly indicating an active state.

Responsive and Accessible

Fluid sizing: The font size and button dimensions scale with the screen size, maintaining consistency across devices.
Reduced motion support: If a user has “reduced motion” enabled in their system preferences, all transitions and animations are disabled automatically for accessibility.
Keyboard navigable: Fully focusable and operable without a mouse.

Why Use This Bubble Checkbox?

✦ No JavaScript: Lightweight and easy to implement
✦ Visually Appealing: Adds a fun, interactive visual cue
✦ Fully Customizable: Adjust sizes, colors, and animation speeds to match your brand
✦ Mobile-Friendly: Works beautifully on all screen sizes

Where to Use It?

This bubble checkbox is ideal for:

Custom toggle switches
Fun website forms or games
Interactive UI controls on creative landing pages
Modern portfolio sites

Final Thoughts

If you’re looking to bring playful, modern interactivity to your forms or toggle switches, this bubble-style checkbox is a perfect fit. Built with nothing but HTML and CSS, it’s a lightweight yet powerful UI enhancement that can easily elevate the user experience on your site.

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.