ボタンをホバーしたときのエフェクトまとめ（基本編）
：ボタンをホバーした時のサンプルをまとめました。コピペでそのまま使用できます。
ボタンをホバーしたときによく見る動きを、まとめてみました。コピペでもそのまま使用できます。
目次
はじめに
共通部分のHTML/CSSです。btnCommonはボタンの装飾、btn00は それぞれのボタンによって異なります。
<p><a href="#" class="btnCommon btn00">button</a></p>
p{
text-align: center;
}
.btnCommon a{
position: relative;
display: block;
width: 150px;
height: 46px;
box-sizing: border-box;
padding: 10px;
border: 1px solid #333;
color: #333;
transition: .2s;
}
ゆっくりと背景色が変化
よく見る動作の１つですね。簡単に実装できて、使いやすいです。
/* ボタン１ */
.btn01:hover {
background-color: #333;
color: #fff;
}
枠線の種類が変化
枠線の種類を「dashed（点線）」にしています。
/* ボタン2 */
.btn02:hover{
border-style: dashed;
}
角丸になる
ホバーすると枠線が角丸に変化します。
/* ボタン3 */
.btn03:hover{
border-radius: 10px;
}
文字間が広がる
ホバーするとテキストの文字間が広がります。
/* ボタン4 */
.btn04:hover{
letter-spacing: 2px;
}
背景がスライド（左から右へ）
ホバーすると背景がスライドします。これも、設定次第でいろんな角度・方向へスライドできます。
/* ボタン5 */
.btn05{
overflow: hidden;
}
.btn05:before{
content: "";
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-color: #333;
transition: .2s;
}
.btn05:hover{
color: #fff;
}
.btn05:hover:before{
left: 0;
}
背景がスライド（下から上へ）
ホバーすると背景がスライドします。先ほどのと、方向が違うだけです。
/* ボタン6 */
.btn06{
overflow: hidden;
}
.btn06:before{
content: "";
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
bottom: -100%;
left: 0;
background-color: #333;
transition: .2s;
}
.btn06:hover{
color: #fff;
}
.btn06:hover:before{
bottom: 0;
}
最後に
いかがでしたか？
色々な動きをしているボタンも見かけますが、まずは基本が大事なので シンプルでよく見るものをまとめました。よければ使ってみてくださいね。