I'm trying to get rid of a box that appears only on mobile devices when a user taps/holds a link (button). I've noticed when I set the active state color to the color I want the font to be it appears to set the background color as well.
a:active{outline: none; color: #fff;}
Here is how the links look like before and after they are clicked on mobile (looks fine on desktop).
Button before it is clicked:
Button after it is tapped/held:
Sounds to me like you want to remove the color property for mobile only. To achive that you can use @media only screen and (max-width: 600px)
property in css which will load the css for all devices that have max-width
of 600px
. Here you can find more info on that https://www.w3schools.com/cssref/css3_pr_mediaquery.asp