前提・実現したいこと
・1つの画像の上に、CSSでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。
・ボタンは整列ではなく、すべてに任意の位置を設定したい。
(画像は複数あり、turn.jsを利用してページめくりの機能をつけています。)
発生している問題・エラーメッセージ
CSSのボタン1つであれば問題なく動作します。
ボタンを2つ以上だと、指定した位置にボタンを表示させることができません。
※勉強中の初心者です。基本的なところで間違っているかもしれません。
該当のソースコード
①ボタン1つのとき(問題なし)
html
<div class="btn01"> <img src="examle01.jpg"alt=""> <a href="リンク先"class=btn target="_blank" ></a></div>
CSS
.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; } .btn01 a{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; }
試したこと
②ボタン2つのとき
html
<div class="page01"><img src="example01.jpg" alt=""> <a href="リンク先1" class="btn btn01" target="_blank"></a> <a href="リンク先2" class="btn btn02" target="_blank"></a> </div>
CSS
.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; } .btn01 a{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } .btn02 a{ position: absolute; top:400px; left:50px; padding:0; }
ボタンのデザインは全ボタン共通なので.btnとして書き、位置はそれぞれ変えたいので.btn01,
.btn02とわけて位置情報を記述している、というつもりです。
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー