このHTMLで２番目と３番目がボタンで表示されません。

締切済

質問者：あんな258466
質問日時：2018/09/08 15:30
回答数：1件

このHTMLで２番目と３番目がボタンで表示されません。
1番目と４番目はきちんとボタンで表示されます。

ボタンのデザインはこのページの「ふわっと光るボタン」を使わさせてもらっています。
https://copypet.jp/417/

どこが間違えているのでしょうか？
どうかご教示お願い致します。

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="utf-8">
<title>駄菓子</title>

<style type="text/css">
a.cp_btn {
position: relative;
display: block;
width: 400px;
margin: auto;
max-width: 500px;
padding: 0.5em;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
background: #e6b422;
transition: .4s;
border-radius: 4px;
font-size: 17pt
}
a.cp_btn:hover {
text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
transition: .4s;
}

a.ar_btn {
position: relative;
display: block;
width: 400px;
margin: auto;
max-width: 500px;
padding: 0.5em;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
background: #e6b422;
transition: .4s;
border-radius: 4px;
font-size: 17pt
}
a.cp_btn:hover {
text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
transition: .4s;

</style>
</head>
<body>

<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a>

<img class="img-responsive maximage" src="http://www.amu.jpg" alt="" width="1000" height="704" />

<a href="http://www.url/#okashi" target="_blank" class="ar_btn">ボタンで表示されない</a>

<img class="img-responsive maximage" src="http://www.nroke.jpg" alt="" width="1000" height="699" />

<a href="http://www.url/#okashi" target="_blank" class="ar_btn">ボタンで表示されない</a>

<img class="img-responsive maximage" src="http://www.nde-ta.jpg" alt="" width="1000" height="828" />

<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a>

</body>
</html>