I Built a Cyberpunk Neon Button with Real-Time Reflection (0% JS)

In web design, buttons are usually the most boring part of a page. But they are also the most important part—it's where the user takes action.

I recently challenged myself to create a "High-End Cyberpunk Button" that looks like it belongs in a AAA game UI.

The Goal?

1. Neon Glow: It needs to look like a light source.
2. Floor Reflection: It must cast a reflection on the ground.
3. No JavaScript: It must run on 100% Pure CSS for 60FPS performance.

The Result (Live Preview)

Here is a sneak peek of what I built. Notice how the reflection reacts instantly when you hover?

The Logic Behind the Magic

I didn't use any heavy libraries or image files. The entire effect relies on two core CSS concepts:

1. Multiple Box Shadows: To create the "hazy" neon look, I layered multiple shadows with different blur radiuses.
2. The perspective Property: The reflection isn't a duplicate element in the HTML. It's a CSS pseudo-element (::before) that I flipped upside down and blurred using filter: blur().

By keeping it pure CSS, this button loads instantly and doesn't block the main thread.

Get the Source Code

I have documented the complete step-by-step tutorial, including the HTML structure and the exact CSS properties used for the glow and reflection, on my personal blog.

You can copy-paste the code directly into your project.

👉 Get the Full Source Code Here (AhmodMusa.com)

---

I regularly post about breaking the limits of CSS. Follow me for more creative UI experiments!