ボタン全体のクリック

Question

【HTML】
<button><a class="here" href="#mail">お問い合わせはこちら</a></button>

お問い合わせの文字にしかリンクがついていません。
display: blockにしたら崩れるし、
<a>の中に<button>を入れても崩れました。
オススメはありますか？

よろしくお願いします

Answer 1

『お問い合わせの文字にしかリンクがついていません。』ってのがよくわからないけど
a使わないでってのは？onclickに仕込めば行けた気がする

<button type="button" class="here" onclick="location.href='#mail'">お問い合わせはこちら</button> 

Comments

[kyoya0819]

> 『お問い合わせの文字にしかリンクがついていません。』ってのがよくわからないけど

buttonの中のpadding部分を押しても、aタグが反応しないと言うことでは？

[risako__88]

そうです！
わかりにくい表現ですみません

[sousuke]

ソース画像だと画像見てちまちま手打ちなんてしないので、実験しにくいのでソース貼ってください。

[risako__88]

button {
border: 2px solid #eee;
background-color: rgba(204, 197, 197, 0.315);
border-radius: 25px;
padding: 10px 15px;
position: absolute;
top: 60%;
display: inline-block;
z-index: 11;
font-weight: 400;
font-size: 15px;
line-height: 20px;
cursor: pointer;
font-weight: bold;
box-shadow: 2px 2px 1px rgb(122, 121, 11);
text-shadow: 1px 2px 0 rgb(122, 121, 11);
color: #fff;
&:hover {
background-color: rgba(255, 255, 255, 0.886);
text-shadow: none;
.here {
color: #333;
}
}
.here {
color: #fff;
text-decoration: none;
}
}

[risako__88]

お手数おかけします…

[sousuke]

質問文にコードブロックで。とりあえず回答したのでいい気がするけどそこはどうなの？
https://jsfiddle.net/qt8sg235/

[risako__88]

無事にうまくいきました！
ありがとうございました！

Answer 2

https://qiita.com/khsk/items/c026b4a21ac27b2cea71