How to remove click effect in HTML, CSS-CodePudding

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

CodePudding user response：

I found a case similar to yours, here I share the link how to remove bootstrap 4 button click effect and How to remove 'press button' effect and make button flat even on click Hope this helps you

CodePudding user response：

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: rgba(0,0,0,0);
  -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

CodePudding user response：

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...
  }
}