WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
होवर प्रभाव के साथ HTML बटन (WEBLEB)
41
sergioarmijo30
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
14 March 2025
कृत्रिम-3D सीएसएस क्षेत्र / बनावट के साथ
20 June 2025
3D कार्ड प्रभाव के साथ HTML लॉगिन पंजीकरण फ़ॉर्म
25 July 2025
3D लॉगिन साइनअप बॉक्स HTML CSS
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button class="button" data-text="Awesome"> <span class="actual-text"> WEBLEB </span> <span aria-hidden="true" class="hover-text"> WEBLEB </span> </button> </body> </html>
CSS
Copy
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; } .button { margin: 0; height: auto; background: transparent; padding: 0; border: none; } .button { --border-right: 6px; --text-stroke-color: rgba(71, 84, 159, 0.6); --animation-color: #c18afbaa; --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 5px 23px var(--animation-color)) }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
