Transparent buttons and active states in a mobile

Question

I made a transparent button:

.home-btn-left {
  position: fixed;
  left: 20px;
  top: 20px;
  background-color: transparent;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>

It doesn't have a hover, focus or active state. But when I push it on my iphone I see this and I really don't wanna have it:

Do you have some suggestion?

please provide a jsfiddle : https://jsfiddle.net/ add your code there so people can see what is happening and what can be changed to get the right result. — Vivek Tankaria, Dec 02 '16 at 11:49
maybe you should apply class name to the button as it called in css-rules: `❮` — Banzay, Dec 02 '16 at 11:59

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

First off, you should apply the styles for every state of the <a> element using:

.home-btn-left,.home-btn-left:hover,
.home-btn-left:active, .home-btn-left:focus { /* your styles */ }

then you should add the otline property, to prevent dotted outline or similar behaviours

outline: 0;

Edit: on more digging you might be searching for -webkit-tap-highlight-color, like described here

edited May 23 '17 at 10:30

Community

answered Dec 02 '16 at 11:55

Giovazz89

Thank you! It was the -webkit-tap-highlight-color – Valentin Verdegales Dec 02 '16 at 12:07

1 Answers1