WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Aquatic button
1617
Andev.web
Open In Editor
Publish Your Code
Recommended
21 October 2024
Firefly Button
11 April 2025
Invalid Page Button
31 July 2025
HTML Neon Button Example
HTML
Copy
Andev Web
Hover me!
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900'); :root { --text-color: hsla(210, 50%, 85%, 1); --shadow-color: hsla(210, 40%, 52%, .4); --btn-color: hsl(210, 80%, 42%); --bg-color: #151F28; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--bg-color); } button { position:relative; padding: 10px 20px; border: none; background: none; cursor: pointer; font-family: "Source Code Pro"; font-weight: 900; text-transform: uppercase; font-size: 30px; color: var(--text-color); background-color: var(--btn-color); box-shadow: var(--shadow-color) 2px 2px 22px; border-radius: 4px; z-index: 0; overflow: hidden; } button:focus { outline-color: transparent; box-shadow: var(--btn-color) 2px 2px 22px; } .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40px; pointer-events:none; } button::after{ font-weight: 200; top: -30px; left: -20px; } .right, .left { position: absolute; width: 100%; height: 100%; top: 0; } .right { left: 66%; } .left { right: 66%; } .right::after { top: -30px; left: calc(-66% - 20px); background-color: var(--bg-color); color:transparent; transition: transform .4s ease-out; transform: translate(0, -90%) rotate(0deg) } button:hover .right::after { transform: translate(0, -47%) rotate(0deg) } button .right:hover::after { transform: translate(0, -50%) rotate(-7deg) } button .left:hover ~ .right::after { transform: translate(0, -50%) rotate(7deg) } /* bubbles */ button::before { content: ''; pointer-events: none; opacity: .6; background: radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px); width: 100%; height: 300%; top: 0; left: 0; position: absolute; animation: bubbles 5s linear infinite both; } @keyframes bubbles { from { transform: translate(); } to { transform: translate(0, -66.666%); } }
JS
Copy