Introdução
Neste tutorial, você aprenderá a adicionar efeitos de hover personalizados aos botões usando CSS no construtor da Rockty. Isso tornará seus botões mais interativos e visualmente atraentes, aprimorando a experiência do usuário.
Passos para Adicionar Efeitos de Hover
🎨 Defina as Cores Iniciais do Botão
1️⃣ Selecione o botão que deseja personalizar.
2️⃣ Acesse a engrenagem do botão e vá para Estilo/Tipografia.
3️⃣ Defina a Cor de Fundo e a Cor do Texto conforme desejado.
❗ Observação: Essas serão as cores padrão do botão.
⚙️ Acesse as Configurações Avançadas do Botão
1️⃣ No seu construtor, selecione o botão que você deseja personalizar.
2️⃣ Vá para a aba Avançado nas configurações do botão.
🏷️ Crie e Aplique uma Classe CSS
1️⃣ No campo CSS Classes, insira o nome efeito-hover para a classe CSS.
📝 Adicione o Elemento Script à Sua Página
Para adicionar um elemento Script à sua página, siga estas etapas:
1️⃣ Adicione um novo elemento na sua página.
2️⃣ Selecione o elemento 'Script' na lista de opções disponíveis no menu lateral esquerdo.
💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos ou sobre como funciona o elemento de Script, confira nossos tutoriais:
💻 Adicione o Código CSS
Acesse o elemento de Script no topo da sua página para inserir o seguinte código CSS dentro da tag <style> no header, substituindo os valores HEX para corresponder às cores desejadas.
<style>
.efeito-hover {
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave */
}
.efeito-hover:hover {
background: #HEX_DO_FUNDO; /* Cor de fundo ao passar o mouse */
color: #HEX_DO_TEXTO; /* Cor do texto ao passar o mouse */
transform: scale(1.05); /* Leve aumento no tamanho do botão */
}
</style>
🎨 Obtenção de Cores HEX
Paleta de Cores do Construtor: Utilize a paleta de cores disponível nas configurações do botão para selecionar e copiar o valor HEX diretamente.
Ferramentas Online:
Adobe Color: Crie e ajuste paletas de cores e obtenha valores HEX.
Coolors: Gere paletas de cores e copie os valores HEX das cores que você gosta.
✅ Publique e Teste o Efeito de Hover
Feche o elemento de Script e publique a página. Acesse a página publicada para garantir que o efeito de hover está funcionando como esperado. Ajuste o código CSS conforme necessário para obter o efeito desejado.
Conclusão
Adicionar um efeito de hover pode melhorar a interatividade dos botões e a experiência do usuário. Explore as opções de personalização para encontrar o efeito que melhor se adapta ao design da sua página.
💡 Dicas Adicionais
Escolha Cores Contrastantes: Certifique-se de que as cores do efeito de hover contrastem com as cores padrão do botão para garantir que o efeito seja visível.
Use Efeitos Suaves: Transições suaves ajudam a criar uma experiência de usuário mais agradável.
Teste em Diferentes Dispositivos: Verifique como o efeito de hover aparece em diferentes tamanhos de tela e dispositivos para garantir a consistência.
Para Estilizações Avançadas, como aplicação de gradientes, entre em contato com nosso suporte para obter assistência personalizada.
📚 Tutoriais Relacionados
🤔 Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, não hesite em entrar em contato com nosso suporte. Nossa equipe está sempre pronta para ajudar você a aproveitar ao máximo a Rockty!