/* Container styling */
.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Hide default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Wrapper for checkbox elements */
.checkbox-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkmark (square transforming to star) */
.checkmark {
  position: absolute;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0a0a23, #1c2526);
  border: 2px solid #4b5eaa;
  border-radius: 12px;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background 0.3s ease-in-out,
    border-color 0.3s ease,
    border-radius 0.3s ease;
  box-shadow: 0 0 8px rgba(75, 94, 170, 0.3);
}

/* Hover effect */
.container:hover .checkmark {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(75, 94, 170, 0.5);
}

/* Checked state: Transform to star shape */
.container input:checked ~ .checkbox-wrapper .checkmark {
  background: linear-gradient(135deg, #ff5e62, #ffd452);
  border-color: #ffd452;
  border-radius: 50%;
  transform: rotate(45deg) scale(1.2);
  box-shadow: 0 0 20px rgba(255, 212, 82, 0.8);
}

/* Star checkmark symbol (pseudo-element) */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1.6),
    opacity 0.3s ease-in-out;
}

/* Show star when checked */
.container input:checked ~ .checkbox-wrapper .checkmark::after {
  display: block;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Nebula glow effect */
.nebula-glow {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(
    circle,
    rgba(75, 94, 170, 0.3) 10%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0.5;
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nebula swirl when checked */
.container input:checked ~ .checkbox-wrapper .nebula-glow {
  opacity: 1;
  transform: rotate(180deg);
  background: radial-gradient(
    circle,
    rgba(255, 94, 170, 0.5) 10%,
    rgba(255, 212, 82, 0.3) 70%
  );
  animation: swirl 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Swirl animation keyframes */
@keyframes swirl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Sparkle effect */
.sparkle-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Sparkle particles */
.sparkle-container::before,
.sparkle-container::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd452;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.6s ease;
}

/* Sparkle animation when checked */
.container input:checked ~ .checkbox-wrapper .sparkle-container::before {
  transform: translate(12px, -12px);
  opacity: 1;
  animation: twinkle 0.8s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

.container input:checked ~ .checkbox-wrapper .sparkle-container::after {
  transform: translate(-12px, 12px);
  background: #ff5e62;
  opacity: 1;
  animation: twinkle 0.8s cubic-bezier(0.5, 0, 0.5, 1) 0.2s forwards;
}

/* Twinkle animation keyframes */
@keyframes twinkle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) translate(10px, -10px);
    opacity: 0;
  }
}

/* Pulse effect on hover */
.checkbox-wrapper::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  background: rgba(75, 94, 170, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1.4);
  z-index: -1;
}

.container:hover .checkbox-wrapper::before {
  transform: scale(1);
}

/* Bounce animation when checked */
.container input:checked ~ .checkbox-wrapper .checkmark {
  animation: bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Bounce keyframes */
@keyframes bounce {
  0%,
  100% {
    transform: rotate(45deg) scale(1.2);
  }
  50% {
    transform: rotate(45deg) scale(1.4);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Star Checkbox with Glow, Sparkles, and Bounce Effects Using Only HTML & CSS

Checkboxes don’t have to be boring — and this glowing, animated, star-transforming checkbox proves just that. Built entirely with HTML and CSS, this stylish UI element adds magic to your forms and interfaces without requiring any JavaScript.

In this tutorial, we’ll explore how to create a futuristic checkbox that includes:

A glowing nebula effect
A shape-shifting star transformation
Sparkling twinkle particles
Smooth animations and a satisfying bounce

Let’s dive into how this interactive element works and where you can use it.

Why Use an Animated Checkbox?

Adding animations to UI elements like checkboxes can:

Improve user engagement
Add personality to your brand
Enhance interactivity in creative apps, games, portfolios, or futuristic themes

This checkbox is ideal for modern, space-themed, or visually rich projects where standard checkboxes feel too plain.

Key Features of This CSS Checkbox

1. Hidden Native Input

The default checkbox input is hidden using opacity: 0 and absolute positioning. The entire visual design is handled with CSS.

2. Custom Checkmark Box

The base square has a gradient background and glowing border. On hover, it scales up with a shadow for a soft interactive feel.

When checked:

The box rotates and scales
It morphs into a rounded star-like circle
Background changes into a vibrant gradient with glowing shadows

3. Animated Star Symbol

A small star mark (::after) fades into the center when checked. It’s subtle, elegant, and smoothly transitions in scale and opacity.

4. Nebula Glow Animation

An extra div with a radial gradient creates a cosmic glow effect. When the checkbox is checked, it spins with a soft swirl animation in vibrant hues.

5. Twinkling Sparkles

Two animated particles shoot out on check, mimicking twinkling stars with different colors and directions. These enhance the “galaxy feel.”

6. Bounce on Check

To top it off, the checkbox uses a CSS bounce effect when activated — adding a delightful feedback animation.

7. Hover Pulse

A soft circular pulse expands under the checkbox when hovered, drawing attention without distraction.

Best Use Cases

This checkbox style is perfect for:

Space, galaxy, or sci-fi themed websites
Creative portfolios or personal branding
Dark-themed user interfaces
Interactive quizzes or form designs
Gamified UI experiences

How to Customize

You can easily customize the:

Colors: Adjust gradients and glow values
Size: Modify width, height, and scaling values
Animations: Tweak durations, keyframes, or delays
Icons: Replace the star with SVGs or other symbols

Final Thoughts

This cosmic-themed checkbox blends beauty, interaction, and user delight — all using just HTML and CSS. No scripts required, no performance hit. It’s fully responsive, modern, and adds a spark of magic to any website.

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.