Ripple effect pure css transparent

问题

I'm trying to create a pure CSS ripple effekt like this one: https://codepen.io/finnhvman/pen/jLXKJw

Except that I want to use transparent white as background color to be able to use the button on different backgrounds. My only problem is, that the ripple effect always seems to be the wrong way around: instead of a lighter circle expanding, the background becomes light on click and the circle which expands is the darker color.

My coding looks like this:

.background{
width: 150px;
display: inline-block;
height: 50px;
background: #0066dd;
padding: 20px;
}

.color2{
background: #6600cc;
}

.button{
    font-size: 24px;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    transition: all 0.8s ease;
    background-position: center;
}

.button:hover{
  background: rgba(255, 255, 255, 0.15) radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.15) 1%) center/15000%;
}
    
.button:active{
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 100%;
  transition: background 0s;
}

<div class="background">
<span class="button">Button 1</span>
</div>
<div class="background color2">
<span class="button">Button 2</span>
</div>

How can I make the effect the exact opposite way? On-Click the lighter white should start in the middle and expand to the outer.

回答1:

You can reverse the colors in the radial-gradient which is the background of the .button:hover rule:

.background {
  width: 150px;
  display: inline-block;
  height: 50px;
  background: #0066dd;
  padding: 20px;
}

.color2 {
  background: #6600cc;
}

.button {
  font-size: 24px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  transition: all 0.8s ease;
  background-position: center;
}

.button:hover {
  background: rgba(255, 255, 255, 0.15) radial-gradient(circle, rgba(255, 255, 255, 0.15) 1%, transparent 1%) center/15000%;
}

.button:active {
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 100%;
  transition: background 0s;
}

<div class="background">
  <span class="button">Button 1</span>
</div>
<div class="background color2">
  <span class="button">Button 2</span>
</div>

来源：https://stackoverflow.com/questions/58979899/ripple-effect-pure-css-transparent

标签

html

css

material-design