WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão HTML com efeito hover (WEBLEB)
45
sergioarmijo30
Abrir no Editor
Publique Seu Código
Recomendado
19 October 2024
Código da barra de navegação HTML CSS
15 May 2025
Modelo de site de comércio eletrônico HTML CSS
30 June 2025
Formulário de inscrição em HTML com e-mail e senha
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) */
