WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton néon
4661
pan4o
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
30 August 2025
Bouton et calque animés CSS
30 January 2025
Boutons Dégradé Hover
6 May 2024
Bouton de survol au néon
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) */