Can I control button background and text via z-index?

How To
1

Hi everyone,

I’m trying to add a ripple effect on mouseover for a button. The ripple animation currently appears on top of the button text, which doesn’t look right.

Ideally, I would like to layer the elements like this:

  • Button background = z-index 1

  • Ripple effect = z-index 2

  • Button text = z-index 3

This way, the ripple would play underneath the text.

Is this setup possible, and if so, what’s the best way to achieve it?

Thanks!