Ripple effect em CSS puro

ripple-effect.markdown

Ripple effect em CSS puro

Efeito ondulação com :hover.

A Pen by Bruno Nepomuceno on CodePen.

License.

ripple.html

<div class=content>
	<button class="ripple">Ripple effect</button>
</div>

style.scss

/* Uma tela de interface típica possui muitos elementos. Os efeitos de "hover" informam instantaneamente aos usuários com o que eles podem interagir, fornecendo feedback visual nos botões. Mas há um problema: os efeitos "hover" são para aplicativos de desktop, não móveis.

Como não há dispositivos de mouse no celular, os usuários não têm o luxo de usar efeitos de "hover". O uso do efeito de "hover" em aplicativos móveis faz com que os botões fiquem presos no estado de "hover" quando tocados. Essa viscosidade não apenas confunde os usuários, mas os frustra quando são forçados a tocar duas vezes nos botões para iniciar uma ação.
 
Um efeito ondulação fornece o feedback visual que os usuários precisam quando tocam em um botão. Os usuários veem uma animação ondulada no botão que garante que seus dedos atinjam o alvo com precisão. Se eles não vêem um efeito ondulação, eles sabem que erraram no botão. O feedback visual fornece a confirmação imediata de um toque preciso, para que eles não esperem por uma resposta e se perguntem por que nada está acontecendo após um erro.

#uxmovement */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

$font-stack: 'Roboto', sans-serif;
$ice-white: #ecf0f1;
$root-tomato: #e1332d;
$button-tomato: #611613;
$active-tomato: #611613;
$hover-tomato: #C72D28;

*{
	font-family: $font-stack;
	font-weight: 600;
	span{
		color: $ice-white;
		font-size: 1.2rem;
	}
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: white;
	background-color: $root-tomato;
	
	/* Efeito ondulação */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: $hover-tomato radial-gradient(circle, transparent 1%, $hover-tomato 1%) center/15000%;
}
.ripple:active {
  background-color: $active-tomato;
  background-size: 100%;
  transition: background 0s;
}

/* Estilização do botão */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: $button-tomato;
  box-shadow: 0 0 4px #ED362F;
  outline: none;
}

}