16 botões CSS com código pronto e hover

Um bom botão CSS precisa ser mais do que bonito. Ele deve deixar a ação clara, funcionar com teclado, manter contraste suficiente e mostrar estados como foco, carregamento e desativado.

Neste guia, você encontrará 16 botões CSS com código pronto. Todos usam classes próprias, não dependem de bibliotecas externas e podem ser adaptados para formulários, páginas de venda, painéis e projetos pessoais.

Antes de copiar: use o elemento <button> quando a ação acontecer na página, como enviar, abrir ou confirmar. Use <a> quando o objetivo for navegar para outra URL.

Demonstração dos 16 botões CSS

HTML base dos botões

Todos os exemplos partem da classe cf-btn e recebem uma segunda classe para o visual específico:

<button type="button" class="cf-btn cf-btn-primary">
    Salvar alterações
</button>

Dentro de um formulário, informe o tipo explicitamente. type="submit" envia o formulário. type="button" não envia nada por conta própria. Isso evita envios acidentais quando o navegador assume submit.

CSS base compartilhado

.cf-btn {
    appearance: none;
    border: 0;
    border-radius: 8px;
    min-height: 44px;
    padding: 12px 18px;
    font: 600 15px/1.2 system-ui, sans-serif;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.cf-btn:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}

O seletor :focus-visible cria um indicador claro para pessoas que navegam com teclado, sem exibir o contorno em todos os cliques do mouse. Não remova o foco com outline: none sem oferecer uma alternativa visível.

1. Botão CSS primário

.cf-btn-primary {
    background: #1f6feb;
    color: #fff;
}

.cf-btn-primary:hover {
    background: #195fc9;
}

Use o botão primário para a principal ação da tela, como salvar, continuar ou finalizar. Evite vários botões primários competindo na mesma área.

2. Botão com contorno

.cf-btn-outline {
    background: transparent;
    color: #1f6feb;
    border: 2px solid #1f6feb;
}

.cf-btn-outline:hover {
    background: #1f6feb;
    color: #fff;
}

É adequado para ações secundárias, como voltar, cancelar ou ver detalhes.

3. Botão com gradiente

.cf-btn-gradient {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

Gradientes chamam atenção, mas o texto precisa manter contraste suficiente em toda a extensão do botão.

4. Botão com efeito 3D

.cf-btn-lift {
    color: #fff;
    background: #0f766e;
    box-shadow: 0 5px 0 #0b4f4a;
}

.cf-btn-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #0b4f4a;
}

.cf-btn-lift:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #0b4f4a;
}

O estado :active simula o botão sendo pressionado e melhora a resposta visual ao clique.

5. Botão com preenchimento lateral

.cf-btn-slide {
    position: relative;
    overflow: hidden;
    color: #111827;
    background: #fff;
    border: 2px solid #111827;
    z-index: 0;
}

.cf-btn-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #111827;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
    z-index: -1;
}

.cf-btn-slide:hover {
    color: #fff;
}

.cf-btn-slide:hover::before {
    transform: translateX(0);
}

6. Botão com borda em gradiente

.cf-btn-border {
    position: relative;
    background: #fff;
    color: #7c2d12;
    border: 1px solid transparent;
}

.cf-btn-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(90deg, #f97316, #db2777);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

Esse efeito usa máscara CSS. Teste nos navegadores que fazem parte do público do projeto antes de adotá-lo como elemento essencial.

7. Botão neon

.cf-btn-neon {
    background: #07111f;
    color: #67e8f9;
    border: 1px solid #22d3ee;
    box-shadow: 0 0 12px rgb(34 211 238 / 45%);
}

.cf-btn-neon:hover {
    box-shadow: 0 0 22px rgb(34 211 238 / 75%);
}

É um estilo decorativo. Não dependa apenas do brilho para comunicar que o elemento é clicável.

8. Botão com ícone

<button type="button" class="cf-btn cf-btn-icon">
    <span aria-hidden="true">＋</span>
    Adicionar item
</button>

.cf-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #4f46e5;
    color: #fff;
}

O ícone decorativo recebe aria-hidden="true" porque o texto já informa a ação. Um botão apenas com ícone precisa de um nome acessível, como aria-label="Fechar".

9. Botão de download

<a class="cf-btn cf-btn-download" href="arquivo.pdf" download>
    <span aria-hidden="true">↓</span>
    Baixar PDF
</a>

Como a ação aponta para um arquivo, o exemplo usa um link. O atributo download sugere o download, mas o comportamento final também depende do navegador e dos cabeçalhos enviados pelo servidor.

10. Botão em formato de pílula

.cf-btn-pill {
    border-radius: 999px;
    background: #be123c;
    color: #fff;
}

11. Botão com efeito de vidro

.cf-btn-glass {
    color: #0f172a;
    background: rgb(255 255 255 / 55%);
    border: 1px solid rgb(15 23 42 / 25%);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

O efeito depende do conteúdo atrás do botão. Garanta legibilidade mesmo quando o desfoque não for suportado.

12. Botão de ação destrutiva

.cf-btn-danger {
    background: #b91c1c;
    color: #fff;
}

.cf-btn-danger:hover {
    background: #991b1b;
}

Use vermelho para ações como excluir ou remover. Para operações irreversíveis, adicione confirmação e explique claramente o resultado.

13. Botão desativado

<button type="button" class="cf-btn cf-btn-disabled" disabled>
    Continuar
</button>

.cf-btn-disabled,
.cf-btn:disabled {
    background: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
}

O atributo disabled realmente impede a interação. Uma classe visual sozinha não desativa o elemento.

14. Botão de carregamento

<button type="button" class="cf-btn cf-btn-loading" disabled>
    Salvando
</button>

.cf-btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #374151;
    color: #fff;
    cursor: wait;
}

.cf-btn-loading::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid rgb(255 255 255 / 45%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin {
    to { transform: rotate(360deg); }
}

Além da animação, atualize o texto e o estado do componente. Em aplicações dinâmicas, uma região com aria-live pode anunciar o resultado da operação.

15. Botão com cor suave

.cf-btn-soft {
    background: #ede9fe;
    color: #5b21b6;
}

.cf-btn-soft:hover {
    background: #ddd6fe;
}

É útil em ações secundárias que precisam de destaque moderado sem competir com o botão principal.

16. Botão responsivo de largura total

.cf-btn-full {
    width: 100%;
    background: #111827;
    color: #fff;
}

É comum em formulários e telas pequenas. Em layouts maiores, uma media query pode voltar o botão para largura automática:

@media (min-width: 768px) {
    .cf-btn-full {
        width: auto;
    }
}

Veja também como usar media queries no CSS.

Respeite a preferência por menos animação

Algumas pessoas reduzem movimentos no sistema por conforto ou necessidade. Use prefers-reduced-motion para diminuir transições e animações:

@media (prefers-reduced-motion: reduce) {
    .cf-btn,
    .cf-btn-slide::before {
        transition: none;
    }

    .cf-btn-loading::before {
        animation-duration: 1.8s;
    }
}

Checklist de acessibilidade para botões

• Use texto que descreva a ação, como “Salvar perfil”, em vez de apenas “OK”.
• Mantenha foco visível para navegação por teclado.
• Não comunique estado apenas por cor.
• Garanta contraste entre texto, fundo e borda.
• Ofereça uma área de toque confortável, especialmente no celular.
• Use disabled para impedir interação, não apenas uma classe cinza.
• Teste os estados normal, hover, foco, ativo, carregando e erro.

Para praticar esses estilos em um projeto completo, veja a calculadora com HTML, CSS e JavaScript. Para revisar os fundamentos, consulte o que é HTML e o que é CSS.

Fontes e verificação

Exemplos revisados em 14 de julho de 2026 com base na documentação da MDN sobre o elemento button, o seletor :focus-visible e a preferência prefers-reduced-motion.

Conclusão

Os 16 botões CSS deste guia cobrem estilos visuais e estados funcionais comuns. Use a classe base para manter tamanho, tipografia e foco consistentes, e aplique modificadores somente quando ajudarem a comunicar hierarquia e ação.

Antes de publicar, teste com teclado, celular e preferência de movimento reduzido. Um botão eficiente deve continuar compreensível mesmo sem animação ou efeitos decorativos.