Sticky buttons/links with :hover effect on android?

Question

css

There is an android, there is a button, as it is set - it does not matter (whether it is a button, or it is a simple link) with the usual styles. nothing complicated

.btn-green {
text-align: center; 
display: inline-block; 
font-size: 16px; 
padding: 10px 15px; 
line-height: 1; 
text-decoration: none;
position: relative;
border: none; 
color: #fff;
border-bottom: 1px solid #000;
background: #7fce55;
}
.btn-green:hover, .btn-green:focus {background: #368b24;}

so when you click on the button, an action occurs on the page, there is no transition and reloading of the page. But the :hover effect remains on the button.
The essence of the question: how to return the button to its normal state after releasing the user's finger from the android screen?

Answer 1

Remove hover for all mobiles. There is a special function in css. Look.
Or do as I do at the server level =)

Answer 2

it seems that you would like visual confirmation that some element is being clicked?
you can instead .btn-green:hover, .btn-green:focus {}
write .btn-green:active {}
and from the complex - it's scripts on the touchstart to put the class on the touchend to remove ... do you need it so much? )))

Answer 3

Found a solution.
I had to use media and just such a plushtap-highlight-color: rgba(0, 0, 0, 0);

Answer 4

This arrangement is called Masonry.
Solutions: CSS Grid or Masonry JS

Answer 5

bricks.js would be better than masonry