Ripple button

[zero_to_one]

Hey there,
I added some custom css to my header, everything workes great so far. There is just one problem exists due to the custom css that can’t override the themes styling.

/* Ripple effect */
.ripple {
 background-position: center;
 transition: background 0.8s;
}
.ripple:hover {
 background: hsla(235, 100%, 63%, .1) radial-gradient(circle, transparent 1%, hsla(235, 100%, 63%, .1) 1%) 
 center/15000%;
}
.ripple:active {
 background-color:hsla(235, 100%, 63%, .1);
 background-size: 100%;
 transition: background 0s;
}

The background color of the button should stay hsla(235, 100%, 63%, .1) after clicking. this way hover and click state have the same color and work like in the example https://codepen.io/finnhvman/pen/jLXKJw. Thanks for your help!

[christian]

Hey @zerotoone.de,

Your example itself does return to the default background color after clicking. Please note that the active state is activated upon completing the click or tabbing into links. It will not stay activated after a click but will stay activated when you tab into the link.

This is not an issue with our theme.

Thanks.