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