'Remove flashing shadow when pressing buttons on mobile device

pressing button

I'm creating this toggle component but as you can see in the gif whenever I press it on a mobile device there's this flashing shadow behind it, which is probably some native behaviour to indicate the button is being pressed.

I'm trying to get rid of it as it makes the component look kinda clunky and not very smooth. I tried several combinations of props like changing the background color, shadow, transitions, pseudo selectors like :active and others, even changing the element from <button> to <div>, nothing really works and I couldn't find a solution for this anywhere.

Thanks in advance for any help!

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source