Como usar: Estilos de Botão CSS
- Passe o mouse sobre os botões e clique no estilo que você gostar.
- Defina suas cores, tamanho, raio dos cantos e velocidade, além dos estados de hover, pressionado e clicado. Cada estilo atualiza em tempo real.
- Copie o CSS e o HTML, ou use Copiar tudo para ter um único bloco.
- Para o Webflow, clique em Copiar para o Webflow e cole no Designer com Ctrl/⌘+V.
Efeitos de hover leves
Todos os estilos aqui são CSS puro, exceto um estilo de linha deslizante que usa um pequeno SVG inline. Sem biblioteca e sem JavaScript. As cores são propriedades customizadas no topo da regra, então mudar o botão depois significa alterar só dois ou três valores.
- Quem usa teclado recebe um contorno visível
:focus-visibleem todos os estilos. - Movimento reduzido é respeitado: a animação de movimento é desligada para quem pede menos animação.
- Links ou botões: use
<a>para levar a outro lugar e<button>para executar uma ação. O CSS funciona nos dois.
Estados de hover, pressionado e clicado
Cada botão vem com uma cor de texto em :hover e uma cor e tamanho em :active para o estado pressionado. Ative o Estado clicado para adicionar um estilo .is-clicked com um pequeno script, ideal para botões de curtir, salvar ou seguir. Escolha rem para dimensionar o botão em relação à fonte raiz, assumindo o padrão do navegador de 16px. Linhas finas de 1px e 2px continuam em pixels para ficarem nítidas.
Usando um estilo no Webflow
Copiar para o Webflow cola um elemento Embed com os estilos e o botão. O Webflow não consegue criar animações de pseudo-elementos no painel de Estilo, então o Embed mantém o efeito exato. Para estilizar seus próprios botões, coloque o CSS no código personalizado do seu site e aplique a classe neles.
Quer criar um botão do zero? Use o Gerador de Botão CSS. Verifique a legibilidade do texto com o Verificador de Contraste e veja os Ícones de Menu Hambúrguer para botões de menu animados.
Também pesquisado como: efeito hover botão css, botões css animados, animação hover botão, botão css copiar e colar, botão webflow hover, botões css legais, animação de borda botão css.
Ferramentas que combinam com: Estilos de Botão CSS
- Gerador de Animação Hover CSS — Crie animações hover para botões, cards, links e ícones.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.