Botão Css – Hover Efeito Reflexo

Botão Css – Hover Efeito Reflexo

Os pequenos detalhes fazem toda a diferença no design de uma interface, e um bom botão pode transformar completamente a experiência do usuário. Um dos efeitos mais interessantes e modernos é o efeito de reflexo ao passar o mouse (hover).

Neste artigo, vamos criar um botão com CSS puro que exibe um reflexo estilizado quando o usuário passa o cursor sobre ele.

✨ O que é o Efeito Reflexo?

O efeito reflexo simula o brilho de uma luz passando pelo botão, como se fosse um reflexo em uma superfície polida. Ele dá uma sensação de profundidade e sofisticação ao elemento visual. Vamos aplicar esse efeito usando apenas CSS, sem necessidade de JavaScript ou imagens externas.

Para entendermos melhor, veja o exemplo HTML a seguir:

 <div class="box-buttons">               

    <a href="" class="btn btn-efeito"><span> Veja mais...</span></a>

 </div><!--Box Buttons-->

Vamos Adicionar o Css:

Agora vamos adicionar os estilos. O reflexo será feito com um gradiente animado que cruza o botão no hover.

.box-buttons { width:100%; height:100%; float:left; }

.btn { 

 width:100%;
 line-height:40px;
    max-width: 160px; 
 font-size:1em;
 color:#fff; 
 cursor:pointer; 
 display: block;
    border-radius:50px; 
    text-align:center; 
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    float:left; 
  
}

.btn:hover {
  text-decoration: none;
}

.btn-efeito {
  overflow:hidden;
  position:relative;
  background-color:#095599; 
}
.btn-efeito:hover {
  background-color:#0073d9; 
}
.btn-efeito span {
  z-index: 20;
}
.btn-efeito:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -85px;
  opacity:.4;
  position: absolute;
  top: -60px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-transition: all 850ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 850ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 70px;
  z-index:1;
}

.btn-efeito:hover:after {
  left: 130%;
  -webkit-transition: all 850ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 850ms cubic-bezier(0.19, 1, 0.22, 1);
}

/*Adicione esta classe se for usar 2 Botões*/
.margin-right {margin-right:10px; }

✅ Dicas Extras

• Você pode mudar as cores do gradiente para adaptar ao seu design.
• A animação pode ser ajustada com @keyframes para ser mais rápida ou mais suave.
• Combine com sombras e bordas para um efeito ainda mais 3D.

🧪 Teste e Resultado – Botão Css – Hover Efeito Reflexo

Ao passar o mouse sobre o botão, você verá uma faixa de luz atravessando-o na diagonal, como um reflexo suave. O efeito é sutil, elegante e chama a atenção do usuário de forma não invasiva.

🚀 Conclusão

Criar um botão com efeito de reflexo é uma ótima forma de adicionar um toque visual moderno e interativo ao seu site. Com apenas algumas linhas de CSS, é possível trazer um visual mais sofisticado e profissional. Experimente e adapte o efeito para diferentes tipos de botões e cores!

Baixar Código Veja Funcionando