スマホでリンクボタンが2回タップしないと飛ばない

Question

レスポンシブサイトを作っており質問です。
スマホでボタンを1度タップするとhoverが効いて２回目のタップでリンクへ飛ぶのですがそれは
@media (max-width: 767px) {
a:hover img {
opacity:1.0;
}
これで対応できたのですが、下にある内容でどうすれば１度のタップでリンクへ飛ばすことができるのでしょうか？
html
<a class="btn btn-white" href="shopnews.html">新着情報をもっと見る</a>

css
.btn {
position: relative;
z-index: 2;
margin-bottom: 20px;
border-radius: 0;
text-transform: uppercase;
font-size: 12px;
line-height: 12px;
padding: 15px 20px;
overflow: hidden;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:after {
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 0;
height: 100%;
opacity: 0;
content: "";
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:hover:after {
width: 101%;
opacity: 1;
}

.btn:hover {
background-color: transparent;
}

.btn:focus {
outline: 0;
}

.btn i {
display: inline-block;
line-height: 43px;
text-align: center;
border-left: 1px solid #fff;
padding-left: 20px;
margin: -15px 0 -15px 20px;
}
.btn-white {
border: 1px solid #777;
background-color: transparent;
}
.btn-white a {
color: #777 !important;
}

.btn-white i {
border-left-color: #777;
}

.btn-white:after {
background-color: #777;
}

.btn-white:hover {
border-color: #777;
background-color: transparent;
color: #fff;
}

.btn-white:hover i {
border-left-color: #fff;
}

ご教授お願いします。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[tsotsi]

皆様がどうやってるか不思議だったので教えて下さりありがとうございました(^^)

[kei344]

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。

Answer 1

タッチデバイスでCSSの:activeや:hoverを機能させる。

Comments

[tsotsi]

ありがとうございます！
この方法だと全てのボタンにclassを指定しないとダメですよね？
ページ数が多く１つ１つにclassを指定するのが手間なのですが他に方法はないでしょうか？
お願いいたしますm(_ _)m

[yuki84web]

a:hoverみたいにa要素に対して指定すれば全てのリンクに適用出来ます。