WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de neón
5703
pan4o
Abrir en el editor
Video
Publica tu código
3
Recomendado
10 July 2025
Animación de interfaz flotante CSS
30 March 2025
Un código de ytr3d3
26 August 2025
Plantilla HTML para sitio web de películas
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) */