「公園に行く」赤いボタン

css

html

1
2
3
4
5
6
<div class="gobtn_wrapper">
<div class="gobtn">
<a href="https://maps.google.com/maps?saddr=現在地&daddr=<?php echo post_custom('緯度経度'); ?>" target="_blank" rel="noopener noreferrer">
<span>公園に<br />行く!</span></a>
</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.gobtn_wrapper{
width:120px;height:120px;
margin:20px auto;
text-align:center;
}
.gobtn{
width:100px;height:100px;
margin:10px auto;
background:#ff0c09;
border-radius:50px;
outline: solid 3px #ff0c09;
outline-offset: 2px;
margin: 5px;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
 
.gobtn a:link{color:#ffffff;text-decoration:none;}
.gobtn a:visited{color:#ffffff;text-decoration:none;}
.gobtn a:hover{color:#FFFF00;text-decoration:none;}
.gobtn a:active{color:#ff8833;text-decoration:none;}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲