Criando botões personalizados - CSS

Por: Angelo Luis Ferreira | 17/09/2017 Acessos: 99.093

Neste tutorial, vamos criar botões personalizados com efeito 3D utilizando HTML e CSS. Nosso objetivo é criar botões simples, porém visualmente atraentes para serem utilizados nos layouts de sites ou blogs. 

Veja abaixo os botões que iremos criar neste tutorial:

See the Pen Untitled by Angelo Luis Ferreira (@angeloalf) on CodePen.

BOTÕES

1. Botões são elementos do layout de um site que indicam e incentivam os visitantes ao clique, ou seja, levam os visitantes a executarem um evento de interação.

2. Por isso é muito importante que os botões sejam atrativos, fiquem bem localizados e que combinem com o layout do site onde serão incluídos.

HTML

3. Os botões podem ser criados a partir dos seguintes elementos HTML:

<button onclick="alert('Olá')">Abrir</button>
<a href="#">Acessar</a>
<input type="submit">
<a onclick="alert('Olá')">Clique aqui</a>

Veja como ficam nossos elementos HTML sem estilos:

Abrir Acessar Clique aqui

CLASSES CSS

4. Para personalizar os nossos botões e deixá-los mais atrativos, vamos precisar utilizar "classes". O seletor "classe" serve para aplicar estilos CSS aos elementos HTML.

CLASSE PADRÃO

5. Primeiro vamos definir a classe padrão dos nossos botões com as características CSS básicas dos elementos. Vamos denominar esta classe de .bt, conforme código CSS abaixo: 

.bt {
   border:1px solid #25692A;
   border-radius:4px;
   display:inline-block;
   cursor:pointer;
   font-family:Verdana;
   font-weight:bold;
   font-size:13px;
   padding:6px 10px;
   text-decoration:none;
}

   Onde:

• border - Define o estilo da borda (espessura em pixels e tipo da borda); 
• border-radius - Define o raio da borda em pixels;
• display: inline-block - Garante que tanto os links e os botões tenham a mesma altura;
• cursor:pointer - Garante que a imagem da "mãozinha" apareça quando o leitor passar com o mouse sobre o botão.
• font-family - Define a família da fonte;
• font-weight - Espessura da fonte;
• font-size - O tamanho da fonte em pixels;
• padding - Espaçamento de 6px em cima e em baixo e de 10px nas laterias direita e esquerda;
• text-decoration:none - Remove a linha sob o texto dos links.

Observação: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags  ou inseridas em uma arquivo ".css" externo.

6. Vamos inserir a classe padrão ".bt" que criamos anteriormente nos nosso código HTML:

<button class="bt" onclick="alert('Olá')">Abrir</button>
<a class="bt" href="#">Acessar</a>
<input class="bt" type="submit">
<a class="bt" onclick="alert('Olá')">Clique aqui</a>

 Veja abaixo como ficou o nosso exemplo:

CLASSE SECUNDÁRIA - CORES

7. Agora vamos definir as classes de cores para os nossos botões. Além das cores para cada botão vamos adicionar também cor da borda, cor da fonte, sombra do botão e sombra do texto.

 DICA: Defina 3 tons para cada cor utilizando a ferramenta 0to255.com, ou utilize a tabela de cores.

Por exemplo, para o botão na cor verde escolheremos os tons:

• background escuro: #68b465
• background claro: #abd5aa
• sombra do botão - mais claro: #e3f1e3

Para o texto escolha as cores branco (#fff) ou preto (#333). Para as sombras utilize:

• Para o texto branco (#ffffff) - utilize a sombra cor: #528009
• Para o texto preto (#333333) - utilize a sombra cor: #ffee66

Desta forma definiremos a classe de estilo para cada cor, como segue:

a) classe bt-vd (botão verde)

.bt-vd {
border-color:#68b465;
background:linear-gradient(to bottom, #abd5aa 5%, #68b465  100%);
box-shadow:inset 0px 1px 0px 0px #e3f1e3;
color:#fff;
text-shadow:0px 1px 0px #528009;
}

onde:

• border-color - Define a cor da borda (use o tom mais escuro);
• bacground:linear-gradient - Define o gradiente linear da cor (sentido to bottom, cor mais clara e cor mais escura)
• box-shadow: inset - Define a sombra no contorno do botão (utilize o tom mais claro)
• color: Define a cor da fonte;
• text-shadow - Define a sombra no texto

b) classe bt-lj (botão laranja)

.bt-lj {
border-color:#eb9b48;
background:linear-gradient(to bottom, #f7d6b3 5%, #eb9b48 100%);
box-shadow:inset 0px 1px 0px 0px #fdf7f0;
color:#333;
text-shadow:0px 1px 0px #ffee66;
}

c) classe bt-az (botão azul)

.bt-az {
border-color:#46a7f5;
background:linear-gradient(to bottom, #86c6f8 5%, #46a7f5 100%);
box-shadow:inset 0px 1px 0px 0px #d7ecfd;
color:#fff;
text-shadow:0px 1px 0px #528009;  
}

d)  classe bt-vm (botão vermelho)

.bt-vm {
border-color:#f61f0e;
background:linear-gradient(to bottom, #fca8a1 5%, #f61f0e 100%);
box-shadow:inset 0px 1px 0px 0px #fff4f3;
color:#fff;
text-shadow:0px 1px 0px #528009;  
}

EFEITO :HOVER (mouse sobre)

8. Definidas as classes de cores, vamos agora definir o efeito :hover, quando se passa o mouse sobre o botão. Para criar o efeito, vamos apenas inverter os tons escuro com os tons claro no tributo background-linear para cada cor, fincando as pseudo classes desta forma:

.bt-vd:hover {
background:linear-gradient(to bottom, #68b465 5%, #abd5aa 100%);
}

.bt-lj:hover {
background:linear-gradient(to bottom, #eb9b48 5%, #f7d6b3 100%);
}

.bt-az:hover {
background:linear-gradient(to bottom, #46a7f5 5%, #86c6f8 100%);
}

.bt-vm:hover {
background:linear-gradient(to bottom, #f61f0e 5%, #fca8a1 100%);
}

PSEUDO CLASSE: ACTIVE 

9. Finalmente, vamos definir a "pseudo classe: active" para criarmos um efeito de pressionar quando clicarmos o botão. Usaremos apenas a pseudo classe para a classe padrão ".bt" que no nosso exemplo servirá para todos botões, independente das cores.

.bt:active {
position:relative;
top:2px;
}

 HTML - DEFINIDO CORES DOS BOTÕES

10. Agora só falta definirmos as classes secundárias (cores) para cada botão. Para isto, basta colocar a classe secundária desejada (cores) ao lado da classe padrão para cada elemento HTML:

<button class="bt bt-vd" onclick="alert('Olá')">Abrir</button>
<a class="bt bt-lj" href="#">Acessar</a>
<input class="bt bt-az" type="submit">  
<a class="bt bt-vm" onclick="alert('Olá')">Clique aqui</a>

RESULTADO FINAL

Veja agora nossos botões finalizados:

See the Pen gpywvm by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foram criados nossos botões personalizados. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Enviar Código" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<button class="bt bt-vd" onclick="alert('Olá')">Abrir</button>
<a class="bt bt-lj" href="#">Acessar</a>
<input class="bt bt-az" type="submit">  
<a class="bt bt-vm" onclick="alert('Olá')">Clique aqui</a>

 CSS

.bt {
border:1px solid #25692A;
border-radius:4px;
display:inline-block;
cursor:pointer;
font-family:Verdana;
font-weight:bold;
font-size:13px;
padding:6px 10px;
text-decoration:none;
} 

.bt-vd {
border-color:#68b465;
background:linear-gradient(to bottom, #abd5aa 5%, #68b465 100%);
box-shadow:inset 0px 1px 0px 0px #e3f1e3;
color:#fff;
text-shadow:0px 1px 0px #528009;
}

.bt-lj {
border-color:#eb9b48;
background:linear-gradient(to bottom, #f7d6b3 5%, #eb9b48 100%);
box-shadow:inset 0px 1px 0px 0px #fdf7f0;
color:#333;
text-shadow:0px 1px 0px #ffee66;
}

.bt-az {
border-color:#46a7f5;
background:linear-gradient(to bottom, #86c6f8 5%, #46a7f5 100%);
box-shadow:inset 0px 1px 0px 0px #d7ecfd;
color:#fff;
text-shadow:0px 1px 0px #528009;  
}

.bt-vm {
border-color:#f61f0e;
background:linear-gradient(to bottom, #fca8a1 5%, #f61f0e 100%);
box-shadow:inset 0px 1px 0px 0px #fff4f3;
color:#fff;
text-shadow:0px 1px 0px #528009; 
}

.bt-vd:hover {
background:linear-gradient(to bottom, #68b465 5%, #abd5aa 100%);
}

.bt-lj:hover {
background:linear-gradient(to bottom, #eb9b48 5%, #f7d6b3 100%);
}

.bt-az:hover {
background:linear-gradient(to bottom, #46a7f5 5%, #86c6f8 100%);
}

.bt-vm:hover {
background:linear-gradient(to bottom, #f61f0e 5%, #fca8a1 100%);
}

.bt:active {
position:relative;
top:2px;}