それでも移動させたいなら、親要素を持たせてそこで要素の高さを保証させるのがシンプルな対応方法だと思います。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
click!
分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
/* css */
div.local-button2 {
display: inline-block;
height: 80px;
background-color: white;
border: 1px solid black;
}
div.local-button2 > span{
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a;
box-shadow: 0 5px 0 #ca1c30;
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
div.local-button2:active > span{
box-shadow: none;
transform: translateY(5px);
}
