Ripple effect pure css transparent

Question

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.

score 3 · Accepted Answer · answered Nov 21 '19 at 17:05

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>

That already looks pretty good. One more question though: On-Click the Button now first becomes completely white, before the circle starts. Is there any way to prevent this? — Danmoreng, Nov 22 '19 at 08:55
Nevermind, I didn't completely understand how the effect worked. I guess that's as close as you can get without Javascript. — Danmoreng, Nov 22 '19 at 09:11

Ripple effect pure css transparent

1 Answers1

Linked