Blue (Android) or grey (iPhone) selection square on buttons when pressed

Hello,

I’m kind of stuck with buttons that are used for links.

There are three buttons (social) at the bottom of the site (smartphone mode). The two from the right are buttons with a link and the most left one is a “Block Link”, which all have that same issue.

When pressed the icon should change to another icon which works. But the issue is that when clicked (on a mobile device, a blue selection is shown on top). How can I disable that effect? What is the right way of doing that?

Here’s the preview mode: Webflow - Glove Mobile

Regards,
Alexander

Cool mobile site Alex! When I tested your site on an iPhone 4, it showed a grey border. I think it’s a phone or browser specific effect that is added to give the touch-user feedback from touching a link.

Here’s a link that talks about that: android - Remove focus overlay-color of webview - Stack Overflow

Try putting this in your custom code:

<style>
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus {
  outline: 0;
  border:none;
  color: rgba(0, 0, 0, 0);
}
</style>
1 Like