How to remove click effect in HTML, CSS

Question

Hello developer/programmer,

good afternoon, I am developing a website using PHP, JavaScript, HTML and CSS. I have a problem. when I run website in mobile and when click on any item, button then it show effect, but I don't want that effect.

How to remove button click effect / button on click effect.

• in desktop button click effect not show

button click effect in mobile

Answer 1

The "click" effect seems to be a tap highlight color.

Adding the following css to your html tag should do the trick:

html {
  -webkit-tap-highlight-color: transparent;
}

It set the tap highlight color to transparent.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

Answer 2

You can use media queries in your css file to avoid what you want to avoid in touch devices. you can do it in two way:

/* for devices that can hover, like laptop */
@media (hover: hover) {
  .your-button-class {
     styles...
  }
}

/* for devices that can not hover, like phones*/
@media (hover: none) {
  .your-button-class {
     styles...
  }
}