.button-container {
  position: relative;
  margin: 0 2em;
}

.button-border {
  padding: 3px;
  inset: 0;
  background: #0005;
  border-radius: inherit;
  clip-path: path(
    "M 90 0 C 121 0 126 5 126 33 C 126 61 121 66 90 66 L 33 66 C 5 66 0 61 0 33 C 0 5 5 0 33 0 Z"
  );
}

.button {
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.875em;
  clip-path: path(
    "M 90 0 C 115 0 120 5 120 30 C 120 55 115 60 90 60 L 30 60 C 5 60 0 55 0 30 C 0 5 5 0 30 0 Z"
  );
  width: 120px;
  height: 60px;
  background: #111215;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}

.real-button {
  position: absolute;
  width: 120px;
  height: 60px;
  z-index: 1;
  outline: none;
  border: none;
  border-radius: 17px;
  cursor: pointer;
  opacity: 0;
}

.backdrop {
  position: absolute;
  inset: -9900%;
  background: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 20%,
    #111111aa 50%
  );
  background-size: 3px 3px;
  z-index: -1;
}

.spin {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  overflow: hidden;
  transition: 0.3s;
}

.real-button:active ~ div .spin {
  opacity: 1;
}

.spin-blur {
  filter: blur(2em) url(#unopaq);
}

.spin-intense {
  inset: -0.125em;
  filter: blur(0.25em) url(#unopaq2);
  border-radius: 0.75em;
}

.spin-inside {
  inset: -2px;
  border-radius: inherit;
  filter: blur(2px) url(#unopaq3);
  z-index: 0;
}

.spin::before {
  content: "";
  position: absolute;
  inset: -150%;
  animation:
    speen 8s cubic-bezier(0.56, 0.15, 0.28, 0.86) infinite,
    woah 4s infinite;
  animation-play-state: paused;
}

.real-button:hover ~ div .spin::before {
  animation-play-state: running;
}

.spin-blur::before {
  background: linear-gradient(90deg, #f50 30%, #0000 50%, #05f 70%);
}

.spin-intense::before {
  background: linear-gradient(90deg, #f95 20%, #0000 45% 55%, #59f 80%);
}

.spin-inside::before {
  background: linear-gradient(90deg, #fc9 30%, #0000 45% 55%, #9cf 70%);
}

@keyframes speen {
  0% {
    rotate: 10deg;
  }
  50% {
    rotate: 190deg;
  }
  to {
    rotate: 370deg;
  }
}

@keyframes woah {
  0%. to {
    scale: 1;
  }
  50% {
    scale: 0.75;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Futuristic Spinning Glow Button Using HTML, CSS & SVG Filters

Buttons are more than just clickable elements — they are an opportunity to impress users and enhance interactivity. In this tutorial, we’ll show you how to build a futuristic glow button with spinning gradients and blur effects using only HTML, CSS, and SVG filters.

This visually rich button looks like something straight out of a sci-fi dashboard. It features animated color trails, SVG-powered glow filters, and a responsive hover/press effect — all coded with zero JavaScript.

What Makes This Button Special?

Dynamic Spin Animation on hover
Multi-layered glow filters using SVG <filter>
Custom-shaped button using clip-path for a unique outline
Layered blurring effects for depth and motion
Fully accessible structure using a transparent real-button element on top

How It Works

1. SVG Filters for Glow

At the top of the code, three <filter> elements are defined using <feColorMatrix>. These SVG filters create different levels of glow:

unopaq: Intense glow (used for blurred outer spin)
unopaq2: Moderate glow
unopaq3: Subtle inner glow

Each spinning layer applies one of these filters for a layered luminous effect.

2. Spinning Gradient Backgrounds

Three .spin elements rotate infinitely on hover. Each has its own blur level and gradient style:

Outer blur creates a soft glow aura.
Middle spin intensifies the motion.
Inner spin glows underneath the button for depth.

These are paused by default and start spinning only when hovered.

3. Custom Button Shape with Clip Path

The button uses a clip-path with SVG path data to create a smooth, pill-like form with a curve cutout. This gives it a polished and non-rectangular design without needing SVG files or images.

4. Invisible Click Layer

The .real-button element is a transparent clickable layer that sits above the visuals. This ensures proper interactivity and improves accessibility for screen readers or keyboard navigation.

Use Cases for This Button

This type of animated glow button is ideal for:

Landing pages that need a modern aesthetic
Tech startups or cryptocurrency projects
Game menus or virtual dashboards
Dark-themed UI with neon or futuristic styling

Features at a Glance

Feature	Description
No JavaScript Required	All interactivity handled with pure CSS
Responsive Hover States	Animations activate only when the user interacts
SVG Clip Paths	Creates custom button shapes using CSS `clip-path`
Advanced Filters	Adds glow and blur effects for depth and lighting
Fully Customizable	Easily change colors, filter strength, animation speed

Final Thoughts

This button design demonstrates how powerful HTML and CSS can be when used creatively. By combining SVG filters, CSS animations, and layered elements, you can create an advanced interactive effect that looks amazing and performs smoothly.

Try integrating this glowing spin button into your next dark-themed design to give it a cyber-futuristic edge. You can even experiment with new color gradients or custom path shapes to match your brand or project style.

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.