CSS

Botões personalizados em CSS

Benedito Silva Júnior 15/11/2021

Personalizar botões com CSS é uma ótima maneira de criar uma interface visualmente atraente e interativa para os usuários. Com algumas propriedades CSS, é possível alterar a cor, os efeitos de hover, a sombra, o formato e até mesmo adicionar animações. Neste post, entenda melhor sobre botões personalizados em CSS.

Estrutura básica de um botão personalizado

Comece com um botão simples no HTML:

<button class="custom-button">Clique Aqui</button>

Estilização do botão com CSS

Adicione o CSS para personalizar seu botão:

.custom-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.custom-button:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}

.custom-button:active {
    transform: scale(0.95);
}

Explicação das propriedades

background-color: Define a cor de fundo.
border-radius: Arredonda os cantos, ideal para deixar o botão com aparência suave.
cursor: O cursor muda para “pointer” ao passar o mouse sobre o botão, indicando que ele é clicável.
transition: Adiciona uma animação suave quando o botão é clicado ou passa pelo efeito de hover.
e: Criam efeitos ao interagir com o botão.

Adicionando sombras e efeitos de profundidade

Para dar um efeito mais tridimensional, use box-shadow:

.custom-button {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.custom-button:hover {
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}

Outro exemplo prático

1. Crie o arquivo .css com as seguintes linhas:

.botao /* estrutura do botão */
  {
     font-size:20px;
     text-decoration: none;
     padding: 10px 30px;
     border-radius: 25px;
  }
	
  .destaque /* acabamento final do botão */
  {
     color:#fff;
     background: #f00;
     box-shadow: 2px 2px 1px 1px #000; /* sombra do botão */
  }
    
    /* esconder a sombra ao clicar no botão */
  .destaque:active { /* quando o link estiver ativo, aplicar: */
     box-shadow: none;         
  }

2. No arquivo .html, onde estão os códigos do formulário, chame o arquivo .css e informe o “class” do objeto SUBMIT como “btn btn-blue”. Veja:

<link rel="stylesheet" type = "text/css" href="arquivo.css" >
 
 ...
 
 <INPUT type="SUBMIT" class="botao destaque" value="Responder enquete">

Imagem do botão:

Os códigos .css acima podem ser alterados de acordo com as preferências e necessidades de seu projeto.

Com alguns ajustes, você pode criar botões exclusivos que melhoram a experiência do usuário e fazem sua página se destacar. Personalize os efeitos, adicione animações e combine estilos para encontrar o design que mais se encaixa no seu site.

Dúvidas ou sugestões sobre botões personalizados em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

O SEU COMPUTADOR ESTÁ TRAVANDO, DANDO "TELA AZUL" E DOR DE CABEÇA?
Aprenda a consertar o próprio computador como um profissional!
Especialize-se em manutenção preventiva e corretiva, diagnósticos de defeitos e upgrades com aulas passo a passo sem enrolação.
Torne-se também um técnico diferenciado e conquiste o emprego dos seus sonhos com este curso completo de Montagem e Manutenção de Desktops e Notebooks.

Clique na imagem abaixo e confira mais detalhes do curso: