WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cor gradiente ao passar o mouse
1068
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
9 November 2024
Modelo de site de produto HTML
15 July 2025
Exemplo de formulário de login animado em HTML
8 July 2025
Escolha de personagem com animação de cartão de pré-visualização (sprites CSS)
HTML
Copy
<a class="btn btn-1">Hover me</a> <a class="btn btn-2">Hover me</a> <a class="btn btn-3">Hover me</a> <a class="btn btn-4">Hover me</a> <a class="btn btn-5">Hover me</a>
CSS
Copy
.btn { margin: 10px; padding: 30px; text-align: center; text-transform: uppercase; transition: 0.5s; background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%; color: white; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0 0 20px #eee; border-radius: 10px; } .btn-1 { --c1: #f6d365; --c2: #fda085; } .btn-2 { --c1: #fbc2eb; --c2: #a6c1ee; } .btn-3 { --c1: #84fab0; --c2: #8fd3f4; } .btn-4 { --c1: #a1c4fd; --c2: #c2e9fb; } .btn-5 { --c1: #ffecd2; --c2: #fcb69f; } .btn:hover { --x: 100%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
