How to disable hover effects for mobile devices using CSS

Let's assume that we are working with the following button:

html
<button class = 'Change-Background'>Hover me</button>

If we want this element to change the background on hover:

CSS
button.Change-Background{
    background: transparent;
}

button.Change-Background:hover{
    background: pink;
}

On mobile devices, the hover effect doesn't make sense and it can cause issues if a user clicks on the button. So, we want to allow to hover only in allowed devices. We can use @media (hover:hover) to achieve it.

Let's redefine the CSS:

CSS
button.Change-Background{
    background: transparent;
}

@media (hover: hover){
    
    button.Change-Background:hover{
        background: pink;   
    }
    
}