How to take the automatic background color out of the elements on mobile devices?

Question

Well, I realized that by using Pseudo Classes as :hover, :focus in input elements and in certain other elements, to be able to change from the current state to another state differs from a browser desktop for a browser mobile, because in a browser mobile in the case of the browser Google Chrome for Android it create a light blue background color in the element when it is touched or focused while in a browser desktop that doesn’t happen.

NOTE: In the images below the button is this Button Hover Effect Alternate , He’s on my account at codepen, recommend viewing in a version Desktop and another in the version Mobile to be able to see the behavior.

Example

Displaying in a Desktop Browser (Google Chrome)

In the image above when the mouse is passed over the button, no blue background color is displayed.

Displaying in a Mobile Browser (Google Chrome)

In the image above when there is a touch on the button, a blue background color is displayed.

In the images above perfectly show what is happening, I do not know, because it happens in browsers mobile and I would like to know why this happens and if there is a way to remove it, because visually it bothers me, who can help I am very grateful.

Answer 1

This is not background color, is the highlight (Highlight) used by mobile phones to visually assist that element is "clickable", buttons and anchors (<a>) has this (usually on iOS).

To solve you will probably get by applying this rule in your CSS:

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*pode ser transparent também*/
}

It is not a standard style, I can not say if there are variations on Android and iOS, basically this property says for the context (in this case I applied to html because thus applies to all buttons and related, can apply also only to isolated elements) specified that the "tap" will have a "Highlight" (highlight) with the color rgba(0, 0, 0, 0) (which may be transparent also), being in rgba the last parameter to color opacity.

The "bad" to remove (make it transparent) is that reduces the user’s intuitiveness, since this is the purpose of "tap Highlight", so when creating the buttons, links and the like try to apply some effect that you like and at the same time keep intuitive that it is "enabled" and "clickable".