目次
はじめに
フリーランスなりたての頃のコーディング案件でボタンホバー時にボタンと一緒に画面が動いてしまう実装をしてしまったことがあり、その原因と対処法について記事にします。フリーランスなりたての方などで同じ状況に遭遇している人の手助けになれば幸いです。ホバーでどのような動きをさせたかったかは、この記事を見ていけばわかると思います。
ホバーの動きはPCで確認していただければと思います。
ボタンをホバーした時に画面が動いてしまう原因
ボタンの影をborderで指定しているため
ボタンの影をborderで指定すると下記のようにホバー時に画面も一緒に動いてしまいます。
<a href="#" class="button button-border">border-bottom</a>.button{
width: 300px;
margin: 0 auto;
display: block;
border-radius: 5px;
background: #990d00;
border: none;
font-size: 1.4rem;
line-height: 50px;
font-weight: 700;
color: #fff;
transition: all 0.3s;
}
.button:hover {
transform: translateY(5px);
}
.button-border {
border-bottom: 5px solid #720c03;
}
.button-border:hover {
border-bottom: none;
}ボタンをホバーした時に画面が動いてしまう時の対処法
ボタンの影をborderではなくbox-shadowで指定する
ボタンの影はborderではなくbox-shadowで指定すればホバーした時にボタンだけ動くようになります。
<a href="#" class="button button-shadow">box-shadow</a>.button{
width: 300px;
margin: 0 auto;
display: block;
border-radius: 5px;
background: #990d00;
border: none;
font-size: 1.4rem;
line-height: 50px;
font-weight: 700;
color: #fff;
transition: all 0.3s;
}
.button:hover {
transform: translateY(5px);
}
.button-shadow {
box-shadow: 0 5px #720203;
}
.button-shadow:hover {
box-shadow: none;
}まとめ
2つのボタンを比較するとborderで指定した方はボタンと画面が一緒に動きますが、
box-shadowで指定した方はボタンだけが動くようになっています。
上記で紹介したようなボタンのホバーアニメーションを実現するにはボタンの影のcssはbox-shadowで指定しましょう。
