This button in desktop view works fine, but in mobile view the button stays pressed down.

:root {
  --green: #4285f4;
  --black: rgba(9, 13, 25, 0.752);
  --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff;
  --box-shadow-inset: .4rem .4rem 1rem #ccc inset, -.4rem -.4rem 1rem #fff inset;
}

#theme-toggler {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 1000;
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  text-align: center;
  color: var(--black);
  background: var(--bg-color);
}

#theme-toggler:hover {
  color: var(--green);
  box-shadow: var(--box-shadow-inset);
}

<div id="theme-toggler" ></div>
<script src="https://kit.fontawesome.com/a5ea1b4e1c.js" crossorigin="anonymous"></script>

Codepen

CodePudding user response：

One of the ways to prevent hover on mobile is to always put hover on media query bigger than mobile screen. so it only works if viewport width is more than mobile query.

and if you want the style to happen only when clicking the button on mobile, then just add active out of the query or in mobile query.

below hover will work only if viewport width is more than 600px.

:root {
  --green: #4285f4;
  --black: rgba(9, 13, 25, 0.752);
  --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff;
  --box-shadow-inset: .4rem .4rem 1rem #ccc inset, -.4rem -.4rem 1rem #fff inset;
}

#theme-toggler {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 1000;
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  text-align: center;
  color: var(--black);
  background: var(--bg-color);
}

@media only screen and (min-width: 600px) {
  #theme-toggler:hover {
    color: var(--green);
    box-shadow: var(--box-shadow-inset);
  }
}

  #theme-toggler:active {
      color: var(--green);
      box-shadow: var(--box-shadow-inset);
    }

<div id="theme-toggler" ></div>
<script src="https://kit.fontawesome.com/a5ea1b4e1c.js" crossorigin="anonymous"></script>