Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderRecursos e Ferramentas do Construtor
Adicionando Efeitos de Hover aos Botões com CSS na Rockty
Adicionando Efeitos de Hover aos Botões com CSS na Rockty

Descubra como aplicar efeitos hover aos botões com CSS na Rockty para melhorar a interatividade e o visual das suas páginas

Sylas avatar
Escrito por Sylas
Atualizado essa semana

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!

Respondeu à sua pergunta?