Botão Html e Css Efeito Hover

Menu Lateral Efeito Sombra

Postado: 27 de março de 2025 Tempo de Leitura: 2 Minutos

Neste artigo veremos como fazer Botão Html e Css Efeito Hover quando passamos o mouse sobre o elemento html button.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para o botão vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples na tag <button>.

Essa tag que usaremos para criar o nosso Botão Html e Css Efeito Hover.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Botão.

Estrutura Código Html:

HTML

<button class="botao-hover"> Enviar</button>

Estrutura Código CSS

Para conseguirmos o efeito desejado no botão, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso Botão.

CSS

.botao-hover {

  width: 150px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 50px;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 20px;
  outline: none;
  text-align: center;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;

}

.botao-hover::after {

  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;

}

.botao-hover:hover {

  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;

}

.botao-hover:hover::after {

  transform: scale(2) rotate(180deg);
  background: #007cff;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);

}

.botao-hover:active::after { background:#000000; }

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!