Botão Hover Efeito Zoom

Botão Hover Efeito Zoom

Neste artigo vamos fazer um efeito simples de Hover no Botão.

botão com efeito de transição css … Aumentar o tamanho do botão quando passamos o mouse dando o efeito de (zoom).

Vamos Adicionar o HTML.

Nesta seção, projetaremos uma estrutura simples na tag html <a href=”#” class=”btn-zoom>. vamos usar a class btn-zoom para estruturarmos o nosso botão.

Veja o código html abaixo.

<a href="#" class="btn-zoom" title="Saiba mais"><i class="icon icon-cube"></i> Saiba mais</a>

Vamos Adicionar o Css.

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

.btn-zoom {
  
  width:170px;
  margin:auto;
  display:block;  
  color:#fff;
  font-family: 'open_sansregular';
  font-size:1.2em;
  text-align:center;
  text-decoration:none;
  text-transform: uppercase;
  padding: 12px 15px;
  border-radius:6px;
  background-color:#59d7dc;
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
  background-size:contain;
  background-position: -250px center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

}

.btn-zoom:hover {

  transform: scale(1.1);
  background-position: -60px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}

.btn-zoom:active {

  transform: scale(1);
  background-position: 500px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

}

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

Código completo veja o resultado !

Baixar Código Veja Funcionando