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 class="btn-light ripple ripple-light">Button</button>
<button class="btn-dark ripple ripple-dark">Button</button>>Solution :
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 class="btn light ripple">Button</button>
<button class="btn dark ripple">Button</button>