Как сбросить hover у кнопки после клика?

Подскажите пожалуйста, на сайте есть кнопки, как на скриншоте, когда нажимаю ее на мобильных устройствах, перехожу на новую страницу, если возвращаюсь обратно, нажатая кнопка остается со стилями как при ховере, ховер сбрасывается, только если ткнуть куда-нибудь на экран, как сделать так, чтобы ховер сбрасывался после нажатия? можно ли в css или в js нужно писать? Убрать ховер в media не получится, так как есть устройства сенсорные с мышкой.

<div class="excursions__item">
          <div class="excursions__img">
            <a href="#">
              <img src="images/main/1_experience.jpg" alt="Фото Тауэрского моста">
            </a>
          </div>
          <h3 class="excursions__title">elevate you experience</h3>
          <div class="excursions__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
              aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
              occaecat cupidatat non proident, sunt.
            </p>
          </div>


          <a href="#" class="btn excursions__button">подробнее</a>


        </div>

.btn {
  display: inline-block;
  padding: 9px 35px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #2f2c34;
  text-transform: uppercase;
  text-decoration: none;

  border: 1px solid #2f2c34;
  text-align: center;
  transition: background-color .2s linear, color .2s linear, border .2s linear;
}

.btn:hover {
  color: #fff;
  background-color: #d0aa8c;
  border: 1px solid #d0aa8c;
}