Button Hover Css

Button Hover Css

O elemento HTML <button> permite a criação de botões clicáveis em uma página. 

Dentro de um elemento <button> você pode colocar texto e tags como <i>, <b>, <strong>, <br>, <img>, etc. 

Neste artigo vamos estilizar o button html com css.

Vamos Adicionar o HTML.

Nesta seção, projetaremos uma estrutura simples na tag html <div class=”container-btn”>. temos dentro da tag <div> as seguintes tags: <button> e <i> para criar a estrutura do nosso botão.

Veja no código abaixo.

<div class="container-btn">

  <button class="btn verde"> <i class="icon icon-check-circle"></i> Cadastrar</button>
  <button class="btn vermelho"> <i class="icon icon-trash-3"></i> Deletar</button>

</div>

Vamos Adicionar o Css.

Nesta seção, usaremos algumas propriedades CSS para projetar o botão. para obter o Efeito de Hover no Botão utilizaremos a propriedade transform: scale(1.1); no css para criarmos um efeito de ZoomIn quando passar o mouse.

.container-btn {

    display: block;
    height: auto;
    width: 100%;
    float: left;
    text-align: center;

}

.container-btn .btn {

  width: 160px;
  height: 60px;
  outline: none;
  cursor: pointer;
  background: none;
  transition: 0.5s;
  font-size: 22px;
  border-radius: 6px;
  font-family: 'open_sansregular';
  margin-right:10px;

}

.container-btn .btn:hover {

  border: none;
  color: white;
  font-size: 25px;
  transform: scale(1.1);

}

/*Cores*/
.verde {
  border: 2px solid #19D26A;
  color: #19D26A;
}

.verde:hover {
  background-color: #19D26A;
  transition: all 0.3s ease-in-out;
}

.vermelho {
  border: 2px solid #EE2727;
  color: #EE2727;
}

.vermelho:hover {
  background-color: #EE2727;
  transition: all 0.3s ease-in-out;
}

Nesta seção, combinaremos as duas seções acima para criar o nosso Button Hover Css Utilizando HTML + CSS.

Código completo veja o resultado !

Baixar Código Veja Funcionando