Botão Css – Hover Efeito Reflexo

Botão Css – Hover Efeito Reflexo

Botão com Efeitos de transições ao passar o mouse com css .

O hover CSS é uma pseudo-classe da linguagem de estilos que permite a criação de diversos efeitos interessantes em uma página HTML. Ele pode ser utilizado em conjunto com outras propriedades, como a transition, para fazer com que a transformação realizada seja mais suave e gradativa. Gostou do nosso conteúdo sobre a utilização do efeito hover CSS?

Para entendermos melhor, veja o exemplo a seguir:

 <div class="box-buttons">               

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

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

Vamos Adicionar o Css:

.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; }

Baixar Código Veja Funcionando