WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão HTML com efeito hover (WEBLEB)
658
sergioarmijo30
Abrir no Editor
Publique Seu Código
Recomendado
20 August 2025
Modelo HTML para blog de design moderno
30 September 2025
Animação de carregamento CSS com ondas e ondulações
25 June 2025
Formulário de login e registro com fundo 3D
HTML
Copy
Sxrgxx
WEBLEB
WEBLEB
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) */