CODEWITHSUNDEEP
javascripthtmlcssbuttononclick
Uttam Nath
Uttam Nath

Reputation: 672

How to remove click effect in HTML, CSS

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.

button click effect in mobile

Upvotes: 0

Views: 2075

Answers (2)

Elvin Chu
Elvin Chu

Reputation: 179

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

Upvotes: 4

Navab Rahimi
Navab Rahimi

Reputation: 51

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

Upvotes: 0

Related Questions