Background color for matRipple

Question

If I use <span matRipple matRippleColor="red">Text</span>, everything becomes red and I can't read my text anymore.

Stackblitz

Is there a way to make only the background red but not the text?

Answer 1

You need to use position absolute and z-index: 1 for text value

<span matRipple matRippleColor="red">
  <span style="position:absolute; z-index:1">Text</span>
</span>