Criar um botão com evento de HOVER e ACTIVE.

Criar um botão

Para criar um botão será utilizado a Tag HTML “<a href=""></a>”, que vai conter uma Class para criar o estilo CSS.

O estilo básico de um botão consiste em Borda, Cor de fundo, Cor da fonte e Espaçamento interno, más um botão pode ir muito, além impressionando pelo efeito e estilo.

Neste exemplo será criado um botão azul com fundo transparente, que vai ter um evento no HOVER e um extra no ACTIVE.

.bt-azul{
border: 2px solid #03a9f4;
padding: 5px 15px;
border-radius: 5px 15px;
font-size: 20px;
color: #03a9f4;
background-color: transparent;
text-decoration: none;
transition: 0.6s;
cursor: pointer;
margin: 10px;
}

.bt-azul:hover{
background-color: rgba(3, 169, 244, 0.60);
color: #fff;
box-shadow: 0px 0px 10px 2px rgba(23,209,255,0.8);
}
.bt-azul:active{
box-shadow: 0px 0px 5px 0px rgba(23,209,255,0.5);
}

Na class “.bt-azul” foi definido o estilo básico que será visualizado ao carregar a pagina.

No “.bt-azul:hover” fizemos uma alteração onde o fundo ganhou uma cor a fonte mudou para branco e ganhou uma sombra azul.

Já o “.bt-azul:active” a alteração foi mínima simplesmente mudou o tanto que se propaga a sombra.

Exemplo do botão.

ENTER  Com border-radius: 5px 15px

ENTER  Com border-radius: 30px 30px

ENTER  Com border-radius: 30px 0px 0px 30px

Se reparar foi utilizado no CSS o “text-decoration: none;” para retirar a linha que sublinha o nome do botão,  “transition: 0.6s;” que torna a mudança mais suave e “border-radius: 5px 15px;” que mudou o formato do botão, caso queira fazer um botão redondo utilize porcentagem no lugar de pixel.

Outro exemplo de botão onde a sombra pode criar o efeito de ser apertado. 

.bt-verde{
border: none;
background-color: #8bc34a;
padding: 5px 15px;
border-radius: 15px;
font-size: 20px;
color: #fff;
box-shadow: 0 6px #777;
text-decoration: none;
transition: 0.3s;
cursor: pointer;
margin: 10px;
}
.bt-verde:hover {
background-color: #7cae42;
}
.bt-verde:active {
  background-color: #8bc34a;
  box-shadow: 0 3px #666;
}

.area-code{
background: rgb(0, 0, 0); border-radius: 5px; padding: 8px;
}
.area-code span{ color: white; }

Exemplo do botão.

ENTER

A estrutura foi à mesma, o que mudou foram alguns parâmetros e deforma simples você pode criar botões de qualidade com aparência agradável.