WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon button
4658
pan4o
Open In Editor
Publish Your Code
Recommended
18 October 2025
CSS Button UI Sxrgxx Animation
28 January 2025
button
13 July 2024
Animated Download Button
HTML
Copy
Neon button
Click me!
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); :root { --clr-neon: #ff1414; --clr-bg: #000000; --font-size: 3rem; } *, *::after, *::before { box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: var(--clr-bg); color: var(--clr-neon); font-family: "Balsamiq Sans"; overflow: hidden; } .neon { margin-top: -150px; font-size: var(--font-size); display: inline-block; position: relative; cursor: pointer; border: var(--clr-neon) 0.125em solid; padding: 0.25em 1em; border-radius: 0.25em; text-shadow: 0 0 .20em #FFF7, 0 0 .30em var(--clr-neon); box-shadow: inset 0 0 .5em var(--clr-neon), 0 0 .5em var(--clr-neon); } .neon::before { content: ""; position: absolute; top: 140%; left: 0; width: 100%; height: 100%; background: var(--clr-neon); transform: perspective(0.2em) rotateX(10deg) scale(1.3, 0.40); filter: blur(0.5em); opacity: 0.6; pointer-events: none; transition: opacity 100ms linear; } .neon::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--clr-neon); box-shadow: 0 0 2em var(--clr-neon); z-index: -1; opacity: 0; transition: opacity 100ms linear; } .neon:hover::after { opacity: 1; } .neon:hover, .neon:focus { color: white; } .neon:hover::before { opacity: 0.8; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */