cssで作るボタンのホバーアニメーション（コピペ可）
ホームページでボタンを作ることはできるけど、そのボタンにどういう効果をつけよう？
と悩むことってないですか？
今回はサンプルとして、ボタンのホバーエフェクトを作ったのでサンプルとしてまとめました。
まずはベースとなるhtmlとcssです。
|
1 |
<div class="btn"> <a href="">button</a></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.btn { width: 200px; height: 50px; } .btn a { display: block; width: 100%; height: 100%; line-height: 50px; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 550; background-color: #f00; text-decoration: none; } |
こちらがベースとなるボタンです。カーソルをあててもなにも変化しません。
これは、hover(ホバー)した時の指定が何もされていないからですね。
それではさっそくボタンを紹介していきます。
Contents
- 1 cssで作るボタンのホバーアニメーション（コピペ可）
- 1.1 01.cssで作るボタンのホバーアニメーション(opacity)
- 1.2 02.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)
- 1.3 03.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)※transition有り
- 1.4 04.cssで作るボタンのホバーアニメーション(左から背景色が変わる)
- 1.5 05.cssで作るボタンのホバーアニメーション(上から背景色が変わる)
- 1.6 06.cssで作るボタンのホバーアニメーション(斜めにしてスタイリッシュ)
- 1.7 07.cssで作るボタンのホバーアニメーション(左右から。扉風。)
- 1.8 08.cssで作るボタンのホバーアニメーション(ボタン風)
- 1.9 09.cssで作るボタンのホバーアニメーション(枠線)
- 2 まとめ
cssで作るボタンのホバーアニメーション（コピペ可）
01.cssで作るボタンのホバーアニメーション(opacity)
カーソルを当ててみると？
opacityという透過性を増すcssプロパティを使っています。
|
1 2 3 |
.btn a:hover { opacity: 0.7; } |
追加したcssはopacityだけですね。button01ですと、opacity: 0.7;があたっていますが、opacityの値を小さくすれば(0に近づける)、透過性が増しますし、1にすれば、透過性は０になります。
※注意点
button01のような文字と背景色だけのボタンであれば、opacityのみを利用したホバーアニメーションはあまり使いません。それよりはこれから紹介していく、背景色と文字色が変わるというホバーアニメーションの方が一般的になります。
※使い方としては、冒頭ののコードをベースに追記していくことになります。
もし01のボタンを作りたいならば、、、
|
1 |
<div class="btn"> <a href="">button</a></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.btn { width: 200px; height: 50px; } .btn a { display: block; width: 100%; height: 100%; line-height: 50px; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 550; background-color: #f00; text-decoration: none; } .btn a:hover { opacity: 0.7; } |
これでopacity効果のついたボタンが完成します。02以降も同様の手順でやっていくと思い通りのボタンを使うことができます。
02.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)
カーソルを当ててみると？
|
1 2 3 4 5 |
.btn a:hover { color: #f00; background-color: #fff; border: 1px solid #f00; } |
ボタンをホバーすると色が逆転することがわかります。このタイプのボタンですとこのような変化が一般的です。
次はこのボタンの変化する時間に変化を持たせてみます。
03.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)※transition有り
カーソルを当ててみると？
２番目のボタンに比べて変化が少し遅くなっているのがお分かりでしょうか。これはcssのプロパティのtransitionを使っています。
|
1 2 3 4 5 6 7 8 |
.btn03 a { transition: all 300ms linear; } .btn a:hover { color: #f00; background-color: #fff; border: 1px solid #f00; } |
transitionを利用することで動きに変化をつけることができます。もし変化にかかる時間を長くしたいのであれば、300msとかかれている箇所を1000msなどにし、変化させる時間を調整することができます。
04.cssで作るボタンのホバーアニメーション(左から背景色が変わる)
カーソルを当ててみると？
ここからちょっと複雑になります。黄色い背景は擬似要素を使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.btn04 { overflow: hidden; } .btn a { position: relative; z-index: 2; } .btn a:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; z-index: -1; background-color: #ff0; transition: all 300ms linear; } .btn a:hover { color: #000; } .btn a:hover:before { left: 0; } |
擬似要素を使ってまったく同じサイズのものを用意しておき、ホバーすると擬似要素が動くようにしています。もともと置いてあるものを隠すために“overflow:hidden”を使っています。隠さないと以下のようになります。
05.cssで作るボタンのホバーアニメーション(上から背景色が変わる)
カーソルを当ててみると？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.btn { overflow: hidden; } .btn a { position: relative; z-index: 2; } .btn a:before { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #ff0; transition: all 300ms linear; } .btn a:hover { color: #000; } .btn a:hover:before { top: 0; } |
04では擬似要素のleftの位置を調整しましたが、この05ではtopの位置を調整しています。
06.cssで作るボタンのホバーアニメーション(斜めにしてスタイリッシュ)
カーソルを当ててみると？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.btn { overflow: hidden; } .btn a { position: relative; z-index: 2; } .btn a:before { content: ''; position: absolute; top: 0; left: -100%; width: 120%; height: 100%; z-index: -1; background-color: #ff0; transition: all 300ms linear; transform: skewX(-30deg) scale(0, 1); } .btn a:hover { color: #000; } .btn a:hover:before { left: -10%; transform: skewX(-30deg) scale(1, 1); } |
04の左から出てくるものをアレンジしました。transform:skewを使って斜めにして、scaleで余白を調整しています。
07.cssで作るボタンのホバーアニメーション(左右から。扉風。)
カーソルを当ててみると？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.btn { overflow: hidden; } .btn a { position: relative; z-index: 2; } .btn a:before, .btn a:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; z-index: -1; background-color: #ff0; transition: all 300ms linear; } .btn a:before { left: 0; } .btn a:after { right: 0; } .btn a:hover { color: #000; } .btn a:hover:before, .btn a:hover:after { width: 50%; } |
左右から動くようにしたいので、これまでの擬似要素afterに加えて擬似要素beforeも一緒に使っています。左右で位置を変えるのみですので、位置が違うだけです。またwidthを０から変化させることでホバーにより出現したような演出が可能になります。
08.cssで作るボタンのホバーアニメーション(ボタン風)
カーソルを当ててみると？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.btn a { position: relative; z-index: 2; color: #000; } .btn a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #ff0; transition: all 300ms linear; transform: translate(-8%, -30%); } .btn a:hover:before { transform: translate(0, 0); } |
これまではpositionで位置を調整してきましたが、今回はtransformを使って変化をつけました。色をもっとかっこよくしたらかっこいいボタンになる、、はず、、です！
09.cssで作るボタンのホバーアニメーション(枠線)
カーソルを当ててみると？
|
1 2 |
<div class="btn"><a href="">button09<span class="line01"></span> <span class="line02"></span></a></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.btn a { position: relative; z-index: 2; color: #fff; background-color: #00a0da; } .btn a:before, .btn a:after { content: ''; position: absolute; width: 5px; height: 0; z-index: -1; background-color: #000; transition: all 300ms linear; } .btn a:before { top: 0; left: 0; } .btn a:after { bottom: 0; right: 0; } .btn a span { display: inline-block; background-color: #000; position: absolute; height: 5px; width: 0; transition: all 300ms linear; transition-delay: 250ms; } .btn a .line01 { top: 0; right: 0; } .btn a .line02 { bottom: 0; left: 0; } .btn a:hover { color: #fff; } .btn a:hover:before, .btn a:hover:after { height: 100%; } .btn a:hover span { width: 100%; } |
spanを入れています。これは、ホバー時の直線が４本必要になるからです。またtransition-delayを使って、動かすタイミングを調整することで１本の線が継続してみえるように調整しています。
まとめ
いかがだったでしょうか。昨今ボタンがないホームページの方が珍しいと思うので、ボタンの知識は必須になります。迷った時に、この記事を参考にボタンを作れるようにしていきたいので、アイデアがでたら随時更新予定です。
コピペで使えるようにしたつもりなので、わかりづらかったら教えていただけると嬉しいです。
ここに載せたコードはあくまでサンプルです。cssをいじれば違う効果をつけることができるので、ぜひぜひ作ってみてください。わかり始めたら面白いですよ。
html/css
javascript
wordpress