WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
निऑन होवर बटन
2701
Andev.web
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
27 November 2024
बटन होवर
10 February 2025
बटन
28 April 2024
एनिमेटेड HTML बटन
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