ＣＳＳボタンを指定した位置に表示できない。

前提・実現したいこと

・１つの画像の上に、ＣＳＳでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。
・ボタンは整列ではなく、すべてに任意の位置を設定したい。

（画像は複数あり、turn.jsを利用してページめくりの機能をつけています。）

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

CSSのボタン１つであれば問題なく動作します。
ボタンを２つ以上だと、指定した位置にボタンを表示させることができません。

※勉強中の初心者です。基本的なところで間違っているかもしれません。

該当のソースコード

①ボタン１つのとき（問題なし）

ｈｔｍｌ

<div class="btn01">
<img src="examle01.jpg"alt="">
<a href="リンク先"class=btn target="_blank" ></a></div>

ＣＳＳ

.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;
  }

試したこと

②ボタン２つのとき

ｈｔｍｌ

<div class="page01"><img src="example01.jpg" alt="">  
<a href="リンク先1" class="btn btn01" target="_blank"></a>
<a href="リンク先２" class="btn btn02" target="_blank"></a>
</div>

ＣＳＳ

.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/ツールのバージョンなど）

m.ts10806

2018/04/16 06:42

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

m.ts10806

2018/04/16 06:43

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。

m.ts10806

2018/04/16 06:43

また「指定した位置にボタンを表示させることができません」であれば、タイトルと要件が合いません。どちらでしょうか？

sue2700

2018/04/16 06:52

ご回答ありがとうございます。初心者アイコン活用します！　解決したいことは「指定した位置にボタンを表示できない」です。ただ、最終的につくりたい形がタイトルの内容なのでそのように書きました。紛らわしいようでしたら申し訳ありません。

m.ts10806

2018/04/16 06:56

タイトルと内容で要件が違うと回答者がどこをゴールに回答して良いか迷います。きちんと明示しておくことで解決が早まります。

m.ts10806

2018/04/16 06:57

質問は質問者のみ編集できるので、ゆっくり編集してみてください。リアルタイムでプレビューも表示されるので、きちんと整形できているか確認しながら編集を行ってください。

sue2700

2018/04/16 07:05

ご丁寧にありがとうございます。大変参考になります。

行動規範の内容に同意します

回答1件

ベストアンサー

.btnの親要素である.page01に
position: relative;
.btn01 a で指定すると.btn01の子要素のaが対象になるのでaは不要です。

CSS
1.page01 {
2  position: relative;
3}
4.btn{
5    display: inline-block;
6    text-decoration: none;
7    color: #FFF;
8    width: 60px;
9    height: 60px;
10    line-height: 60px;
11    border-radius: 50%;
12    text-align: center;
13    vertical-align: middle;
14    overflow: hidden;
15    background-image: -webkit-linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);    
16    background-image: linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);
17    transition: .4s;
18
19}
20
21.btn01{
22  position: absolute;
23  top: 50%;
24  left: 50%;
25  -ms-transform: translate(-50%,-50%);
26  -webkit-transform: translate(-50%,-50%);
27  transform: translate(-50%,-50%);
28  margin:0;
29  padding:0;
30  }
31
32 .btn02{
33  position: absolute;
34  top:400px;
35  left:50px;
36  padding:0;
37  }