Button Keeps :hover effect after being clicked on Mobile Screens-CodePudding

I have this scroll to top button that when it gets clicked on mobile screens, it keeps the color I've set for its hover effect and doesn't go back to the original one.

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
}

#back-to-top:hover {
  color: rgb(255, 0, 140);
}

This is the initial color of the button:

And after it's clicked on Mobile Screens, it keeps its new color until I click somewhere on the screen:

This only happens on Touch Screens and not in Desktop since the hover effect is somehow taken as a focus on Touch Screens.

How can I avoid this and keep the original color after it's clicked?

CodePudding user response：

Try changing the color on hover only if the device has true hover functionality:

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
}

@media (hover: hover) {
  #back-to-top:hover {
    color: rgb(255, 0, 140);
  }
}

<button id="back-to-top">Top</button>

CodePudding user response：

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this

@media (hover: hover) {
button:hover {
    background-color: blue;
   } }

CodePudding user response：

Let the hover effect run an animation with keyframes for 0.3 second. That animation only contains what you want the button look like on hover. That will work for both touch and mouse events.