WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pulsante HTML con effetto hover (WEBLEB)
36
sergioarmijo30
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
28 June 2025
Modello di sito web HTML per il noleggio di biciclette
14 October 2024
Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.
1 December 2024
Pulsante di chiamata azione effetto passaggio del mouse
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) */
