.hyper-checkbox-wrapper {
  --hyper-size: 32px;
  --hyper-primary: #fc03f8;
  --hyper-secondary: #03e9f4;
  --hyper-bg: #111;
  --hyper-transition: 0.3s;

position: relative;
  display: inline-flex;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hyper-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hyper-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.hyper-checkbox-container {
  position: relative;
  width: var(--hyper-size);
  height: var(--hyper-size);
  perspective: 500px;
}

.hyper-checkbox-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--hyper-bg);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--hyper-transition)
    cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hyper-box-border {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all var(--hyper-transition) ease;
}

.hyper-box-fill {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    var(--hyper-primary),
    var(--hyper-secondary)
  );
  opacity: 0;
  transform: scale(0.5);
  filter: brightness(0.7);
  transition: all var(--hyper-transition) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hyper-check-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  opacity: 0;
  transition: all var(--hyper-transition) cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.hyper-check-mark svg {
  width: 20px;
  height: 20px;
  fill: white;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.hyper-box-glitch {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-100%);
  z-index: 1;
}

/* Effetti contenitore */
.hyper-effects-container {
  position: absolute;
  inset: -50px;
  pointer-events: none;
  overflow: hidden;
}

/* Onde di energia */
.hyper-energy-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid transparent;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: -1;
}

.wave-1 {
  border-color: var(--hyper-primary);
}

.wave-2 {
  border-color: var(--hyper-secondary);
}

.wave-3 {
  border: 4px solid rgba(255, 255, 255, 0.3);
}

/* Particelle */
.hyper-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1px;
}

.hyper-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hyper-primary);
  box-shadow: 0 0 10px var(--hyper-primary);
  transform: scale(0) translate(0, 0);
  opacity: 0;
}

.p1,
.p5,
.p9 {
  background: var(--hyper-primary);
}
.p2,
.p6,
.p10 {
  background: var(--hyper-secondary);
}
.p3,
.p7,
.p11 {
  background: white;
}
.p4,
.p8,
.p12 {
  background: #7bffaf;
}

/* Flash */
.hyper-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* Effetto galassia */
.hyper-galaxy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.hyper-galaxy-stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 10px 10px;
  animation: hyper-stars-rotate 10s linear infinite;
  opacity: 0.8;
}

.hyper-galaxy-nebula {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--hyper-secondary) 0%,
    var(--hyper-primary) 30%,
    transparent 70%
  );
  opacity: 0.3;
  filter: blur(5px);
}

/* Onda d'urto */
.hyper-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 30.5%,
    transparent 31%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Indicatore hover */
.hyper-hover-indicator {
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.hyper-hover-pulse {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
}

/* Label styling */
.hyper-checkbox-label {
  display: flex;
  flex-direction: column;
}

.hyper-label-text {
  font-size: 14px;
  color: #e4e4e4;
  transition: color var(--hyper-transition) ease;
}

.hyper-label-status {
  font-size: 10px;
  position: relative;
  height: 15px;
  overflow: hidden;
}

.hyper-label-status-off,
.hyper-label-status-on {
  position: absolute;
  transition: transform 0.3s ease;
}

.hyper-label-status-off {
  color: #666;
  transform: translateY(0);
}

.hyper-label-status-on {
  background: linear-gradient(
    90deg,
    var(--hyper-primary),
    var(--hyper-secondary)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(15px);
}

/* Stato attivo */
.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-fill {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-check-mark {
  opacity: 1;
  transform: scale(1) rotate(5deg);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-border {
  border-color: transparent;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-checkbox-box {
  transform: translateZ(10px) rotateY(10deg) rotateX(-10deg);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-text {
  color: white;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-status-off {
  transform: translateY(-15px);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-label-status-on {
  transform: translateY(0);
}

/* Animazioni straordinarie al check */
.hyper-checkbox-input:checked + .hyper-checkbox .hyper-box-glitch {
  animation: hyper-glitch 0.8s forwards;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-flash {
  animation: hyper-flash 0.3s ease-out;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-1 {
  animation: hyper-wave 2s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-2 {
  animation: hyper-wave 2s 0.15s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-energy-wave.wave-3 {
  animation: hyper-wave 2s 0.3s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-shockwave {
  animation: hyper-shockwave 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-galaxy {
  animation: hyper-galaxy 1.5s forwards;
}

/* Animazione particelle */
.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle {
  animation: hyper-particle 1s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p1 {
  animation-delay: 0.1s;
  transform: translate(30px, -40px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p2 {
  animation-delay: 0.15s;
  transform: translate(50px, -20px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p3 {
  animation-delay: 0.2s;
  transform: translate(60px, 15px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p4 {
  animation-delay: 0.15s;
  transform: translate(40px, 40px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p5 {
  animation-delay: 0.1s;
  transform: translate(10px, 50px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p6 {
  animation-delay: 0.15s;
  transform: translate(-20px, 40px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p7 {
  animation-delay: 0.2s;
  transform: translate(-40px, 20px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p8 {
  animation-delay: 0.15s;
  transform: translate(-50px, -10px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p9 {
  animation-delay: 0.1s;
  transform: translate(-40px, -40px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p10 {
  animation-delay: 0.05s;
  transform: translate(-20px, -50px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p11 {
  animation-delay: 0.1s;
  transform: translate(0, -60px) scale(1);
}

.hyper-checkbox-input:checked + .hyper-checkbox .hyper-particle.p12 {
  animation-delay: 0.15s;
  transform: translate(20px, -50px) scale(1);
}

/* Hover effect */
.hyper-checkbox:hover .hyper-hover-indicator {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.2);
}

.hyper-checkbox:hover .hyper-hover-pulse {
  animation: hyper-pulse 1.5s infinite;
}

/* Focus styles */
.hyper-checkbox-input:focus + .hyper-checkbox .hyper-hover-indicator {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Keyframes per animazioni spettacolari */
@keyframes hyper-wave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

@keyframes hyper-particle {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform-origin: center center;
  }
}

@keyframes hyper-flash {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hyper-glitch {
  0% {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  60% {
    transform: translateX(100%);
    opacity: 0.8;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes hyper-galaxy {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  20% {
    width: 150px;
    height: 150px;
    opacity: 1;
  }
  70% {
    width: 150px;
    height: 150px;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

@keyframes hyper-stars-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes hyper-shockwave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes hyper-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Hyper Checkbox with Glitch, Shockwave, and Galaxy Effects Using HTML & CSS

In the world of modern UI design, checkboxes are often overlooked, but this example completely redefines how interactive a checkbox can be. Introducing the Hyper Checkbox — a high-energy, visually animated form element built entirely with HTML and CSS.

This checkbox does more than just toggle between checked and unchecked — it explodes with vibrant particles, glitch effects, shockwaves, and even a galaxy animation, giving users a visual treat with every click.

What is the Hyper Checkbox?

The Hyper Checkbox is an ultra-stylized toggle element that visually responds to user interaction with:

A glitch transition on check
Colorful energy waves
Flashing animations
Particle explosions
A rotating galaxy effect
Shockwave blast
Subtle hover pulse indicator

All of this is handled with zero JavaScript, relying only on CSS variables, pseudo-elements, and keyframe animations.

Key Features and How It Works

1. Checkbox Structure

The checkbox is built using a hidden <input> and a visible <label>. The label contains the animated checkbox container and multiple nested div elements to simulate all visual effects.

2. Glitch and Particle Effects

Upon checking the box, a glitch-style sweep animates across the checkbox surface. Simultaneously, 12 colored particles burst outward in all directions, adding a chaotic but controlled visual impact.

3. Energy Waves and Shockwave

Three glowing energy rings radiate outward from the checkbox center. A shockwave animation follows to complete the sci-fi-inspired aesthetic.

4. Galaxy Animation

As if the checkbox was summoning interstellar power, a rotating galaxy layer appears — complete with stars and a glowing nebula.

5. Interactive Hover Feedback

When users hover over the checkbox, they see a pulsing ring — subtly indicating that the element is interactive and reactive to clicks.

Why Use a Checkbox Like This?

User Engagement

A unique interactive element like this keeps users curious and increases retention on your page.

Fully CSS-Based

No JavaScript means faster load times, easier customization, and better compatibility.

Perfect for Gamers, Tech Products, or Futuristic Interfaces

If your website or app needs to stand out, this checkbox does exactly that.

Ideal Use Cases

Gaming websites or dashboards
Sci-fi themed user interfaces
Portfolio sites for designers or developers
High-tech product landing pages
Event registrations or feature toggles in creative projects

Customize It Your Way

You can easily modify:

Colors by adjusting --hyper-primary, --hyper-secondary, and --hyper-bg
Animation speed using the --hyper-transition variable
Size of the checkbox by changing --hyper-size
Effects by editing the keyframes or adding/removing particles

Final Thoughts

The Hyper Checkbox is more than a form element — it’s an experience. Whether you’re showcasing creativity or building something visually cutting-edge, this checkbox is an amazing addition to your frontend toolkit.

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.