How to get this ripple effect when changing button color?-CodePudding

I'm just too dumb to get the same effect of the white button on the dark one. Could you explain to me the thought process to get the effect on any background color? Ideally I would like to get a ripple effect of whiteish or greyish color that works on every background. Credits to the original one 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 >Button</button>
<button >Button</button>

CodePudding user response：

Use CSS variable to define the colors:

/* Button style */
.btn {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: black;
  background-color: var(--c);
  box-shadow: 0 0 4px #999;
  outline: none;
}
.light {
  --c: #fff;
  color:#000;
}
.dark {
  --c: #000;
  color:#fff;
}
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: var(--c) radial-gradient(circle, #0000 1%, var(--c) 1%) center/15000% ;
}
.ripple:active {
  background-color: grey;
  background-size: 100%;
  transition: background 0s;
}

<button >Button</button>
<button >Button</button>