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
5184
pan4o
Abrir en el editor
Publica tu código
Recomendado
8 July 2025
Página de destino de la tienda de muebles
10 September 2024
Formulario de inicio de sesión de Panda
13 May 2023
Botón de descarga animado
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) */