单击“页面顶部”按钮的悬停效果会保持不变，我该如何撤消此操作？

如何解决单击“页面顶部”按钮的悬停效果会保持不变，我该如何撤消此操作？

我有一个页面顶部按钮，当悬停时它会变大并变成灰色，但是当点击它时它看起来保持灰色和更大的尺寸，这覆盖了我网站的一部分，特别是在手机上。我只想让它恢复到正常的颜色和大小，充其量，它甚至不需要在移动设备上具有悬停效果，因此如果有一种方法可以在媒体查询中禁用悬停，那也很棒.我怎样才能做到这一点？

https://jsfiddle.net/68z5gtfm/2/

  <div  class="top_link_position">
                <a  class="back-to-top" href="#page_top" title="Top">
                <button class="top_btn"><span class="icon"><i class="fas fa-chevron-up fa-2x"></i></span></button>
                </a>

.top_link_position {
    display: block;
    position: fixed;
    bottom: 0%;
    right: .20%;
    z-index: 600;
}

.top_btn {
    border: 1.5px solid white;
    background: rgb(39,38,38);
    padding: .7rem .7rem;
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
}
.top_btn:hover,.top_btn:focus {
    background: linear-gradient(rgba(167,167,.97),rgba(167,.97));
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: black;
}

.top_btn:hover,.top_btn:focus,.top_btn:active {
    outline: 0;
}

.top_btn:active {
    border: 1.5px solid white;
    background: rgb(39,38);
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
}
.top_btn:visited {
    background: rgb(39,38);
    color: white;
} 

.back-to-top {
    position: fixed;
    bottom: 0em;
    right: 0px;
    text-decoration: none;
    font-size: 12px;
    padding: .35em;
    display: none;
}
.back-to-top:hover .fa-2x {
    font-size: 3em;
    transition-duration: .5s;
}