WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon Hover Button
2979
Andev.web
Open In Editor
Publish Your Code
Recommended
28 May 2024
Delete button
27 February 2024
Simple HTML CSS Button
10 February 2025
Radio buttons
HTML
Copy
WebLeb.com
WebLeb.com
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { font-family: 'Poppins', sans-serif; } body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #212121; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { margin: 0; height: auto; background: transparent; padding: 0; border: none; cursor: pointer; } .button { --border-right: 6px; --text-stroke-color: rgba(255,255,255,0.6); --animation-color: #03959e; --fs-size: 2em; letter-spacing: 3px; text-decoration: none; font-size: var(--fs-size); font-family: "Arial"; position: relative; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--text-stroke-color); } .hover-text { position: absolute; box-sizing: border-box; content: attr(data-text); color: var(--animation-color); width: 0%; inset: 0; border-right: var(--border-right) solid var(--animation-color); overflow: hidden; transition: 0.5s; -webkit-text-stroke: 1px var(--animation-color); } .button:hover .hover-text { width: 100%; filter: drop-shadow(0 0 23px var(--animation-color)) }
JS
Copy