ＣＳＳで作ったボタンが表示できない。

Question

前提・実現したいこと

Intense ImageというJQueryで拡大機能をつけた画像の上に
ＣＳＳでつくったリンクボタンを設置したい。

発生している問題・エラーメッセージ

リンクボタン①は問題なく表示されるが、リンクボタン②が表示させられない。
※リンクボタン②だけを単独で設置すると問題なく表示されるのでhtmlの表記に問題があるとは
思うのですが、見当がつきません。

該当のソースコード

ｈｔｍｌ（CSSボタン①をつかうとき）

<div class="page kakudai" data-image="./拡大後の画像" >
<img src="拡大前の画像" alt="">
<a href="リンク先URL" class="btn01 btn" target="_blank"> </a>
</div>

ｈｔｍｌ（CSSボタン②をつかうとき）

<div class="page kakudai" data-image="./拡大後の画像" >
<img src="拡大前の画像" alt="">
<a href="リンク先URL" class="btn01 btn_a" target="_blank"> </a>
</div>

CSSボタン①（btn)

.btn{
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-image: -webkit-linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);    
    background-image: linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);
    transition: .4s;
}

CSSボタン②（btn_a)

.btn_a{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 4px;
    color: #ffffff;
    background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
    background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #c58668;
}

.btn_a:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

CSSボタンの位置情報として（btn01)

.btn01{
 position: absolute;  
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 margin:0;
 padding:0;
 }

試したこと

class名：pageで画像にボタンをのせ、
Class名：kakudaiでIntense-Imageを適用しているというつもりです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Atsushi_Okumura]

CSSボタン②（btn_a)を使用する際のHTMLはどうなっているのでしょうか

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

提示されたCSSだと高さと幅の指定が無かったのが原因でしょうか。

.btn_a {
省略
  height:60px;
  width:60px;
}

Comments

[sue2700]

まさに仰る通りでした。昨日に続き、度々ありがとうございます。

[sue2700]

Kei344様
ご指摘ありがとうございました。