WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
4659
pan4o
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 September 2024
Datumsrechner
14 September 2024
Modernes Anmeldeformular
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) */