I'm struggling to achieve the same ripple effect on different background colors for my buttons. Can someone please explain the process to create a white or grey ripple effect that will work seamlessly on any background color? Credit goes to the original creator, you can find their work at https://codepen.io/finnhvman/pen/jLXKJw
/* Button style */
.btn-light {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: black;
background-color: white;
box-shadow: 0 0 4px #999;
outline: none;
}
.btn-dark{
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: black;
box-shadow: 0 0 4px #999;
outline: none;
}
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple-light:hover {
background: transparent radial-gradient(circle, transparent 1%, white 1%) center/15000%;
}
.ripple-light:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
.ripple-dark:hover {
background: transparent radial-gradient(circle, transparent 1%, dark 1%) center/15000%;
}
.ripple-dark:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}<button class="btn-light ripple ripple-light">Button</button>
<button class="btn-dark ripple ripple-dark">Button</button>