Ir ao conteúdo
  • Cadastre-se

CSS Efeito hover em botão html


Ir à solução Resolvido por Marcelo Calazans,

Posts recomendados

@EddK

Olá colega.

 

Não é exatamente igual, mas o código abaixo está funcionando aqui comigo no Google Chrome.

 

O modelo do botão do site deles (cuponomia.com.br), a ser copiado, é esse abaixo, para quem quiser ver:

botao-original.jpg.acdec367a0684c68d4d1b9a3311cf2e3.jpg

 

<html>

<body>

<style>
.container-butt {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background-color: #78bf9a;
	width: 240px;  
}

.container-butt p {
	text-align: right;
	color: black;
	margin-right: 2px;
}

.but {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #46C600;
  border: none;
  color: #337b0c;
  width: 200px;
  height: 50px;  
  z-index: 1;  
  transition: all 0.5s 0s ease;
}

.but:after {
    top: 5px;
    right: -17px;    
    background-image: linear-gradient(36deg, #b1cea8, #c6e8b8 38%, #c9e0be 47%, #c0e1b3 51%, rgba(255,255,255,0) 54%) !important;
    transform-origin: center top;
    border-radius: 5px;
    transform: rotate(35deg);
    position: absolute;
    margin-right: -27.5px;
    content: "";
    width: 43px;
    height: 55px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: top;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

.but:hover:after {        
    border-radius:5px;    
    top: 8px;
    right: -22px;    
    width:48px;
    height:60px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-width:0;
    transform-origin:top;
    transform: rotate(42deg);
}
.but:hover {	
  width: 170px;
}
</style>

<div class="container-butt">
    <p>Clube do Hardware</p>
    <button class="but"></button>
</div>

</body>

</html>

 

 

Digo que funciona comigo no Google Chrome, pois precisa testar para ver se funciona bem também em outros navegadores.

 

Não sei bem como eles fizeram o deles, que é muito bem feito e melhor que o meu, mas eu acho esse tipo de coisa muito invasiva, e antes de ser implementado no site de algum cliente profissionalmente, precisa ser bem testado.

 

Sei que não é exatamente o que você queria, mas você pode tentar implementar esse código meu acima, para ver se chega mais perto daquilo que você deseja.

 

Abraços e espero que tenha ficado pelo menos satisfatório.

Link para o comentário
Compartilhar em outros sites

  • Solução
1 hora atrás, EddK disse:

Como faço para adicionar o texto (ver cupom) do botão?

@Marcelo Calazans

 

 

Gostei de fazer isso, é uma brincadeira interessante.

 

Confesso que nunca tinha pensado em fazer isso, mas achei legal.

 

Mudei algumas coisas e acho que ficou melhor, mas o deles é muito bom, difícil fazer exatamente igual.

 

O meu modelo tem algumas limitações estruturais, e se fosse para fazer um exatamente igual ao deles, teria que partir de outro princípio eu acho.

 

Veja o código novo:

 

<html>

<body>

<style>
.container-butt {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background-color: #ecfae5;
	width: 240px;  
	border: 1px solid #46C600;	
  border-radius: 8px;
}

.container-butt p {
	text-align: right;
	color: #255909;
	font-style: bold;
	margin-right: 8px;
}

.but {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #46C600;
  border: none;
  color: #337b0c;
  width: 200px;
  height: 50px;  
  z-index: 1;  
  transition: all 0.5s 0s ease;  
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}



.but p {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;  
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.but:after {
    top: 5px;
    right: -17px;    
    background-image: linear-gradient(36deg, #b1cea8, #c6e8b8 38%, #c9e0be 47%, #c0e1b3 51%, rgba(255,255,255,0) 54%) !important;
    transform-origin: center top;
    border-radius: 5px;
    transform: rotate(35deg);
    position: absolute;
    margin-right: -27.5px;
    content: "";
    width: 43px;
    height: 55px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: top;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

.but:hover:after {        
    border-radius:5px;    
    top: 8px;
    right: -22px;    
    width:48px;
    height:60px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-width:0;
    transform-origin:top;
    transform: rotate(42deg);
}
.but:hover {	
  width: 170px;
  background-color: #3aa300;
}
</style>

<div class="container-butt">
    <p>Clube do Hardware</p>
    <button class="but"><p>Ver Cupom</p></button>
</div>

</body>

</html>

 

Com certeza tem uma forma melhor de se fazer isso, e se eu precisasse fazer isso em um site de um cliente, eu iria parar para pensar um pouco em uma solução mais estável.

 

Vamos aguardar para ver se algum outro colega tem uma opção melhor.

 

Abraços.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...