回答編集履歴

1 リンク追加

Atsushi_Okumura

Atsushi_Okumura score 346

2018/04/16 16:52  投稿

.btnの親要素である.page01に
position: relative;
.btn01 a で指定すると.btn01の子要素のaが対象になるのでaは不要です。
```CSS
.page01 {
 position: relative;
}
.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{
 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{
 position: absolute;
 top:400px;
 left:50px;
 padding:0;
 }
```
```
codepenで確認する↓
[https://codepen.io/RaRukAnA/pen/VXoaJj/](https://codepen.io/RaRukAnA/pen/VXoaJj/)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る