コピペ対応！個人的によく使うボタンのhoverアニメーション・エフェクト
ボタンのアニメーションに関してはデザイナーごとに方針が違うみたいで、「適当でいいスよ」という人もいれば「不透明度だけでいいですよ」という人、漠然と「かっこよくしてください」という人それぞれで、個人的に困るもので、過去にやったものを備忘録的に残しておこうと思ったので記事にしてみました
状況によっては調整が必要になるかもしれんませんが、そのままコピペができるようにもしておくので、こんなもので良ければどうぞ
この記事の目次
背景を動かす系
自分が携わる案件ではゴーストボタン＋背景のアニメーションは使う頻度が高め
ベースとなるHTMLはこちら
|
1 2 3 |
<a href="#" class="btn"> BUTTON </a> |
>cssは見た目を作る部分など毎回同じコードが出てきて長くなってしまいますが、初学者の面倒を見ていた時に基本のコードをコピペしない人が多く、動かないと悩んでいた人が多かったので、こういう形にしておきます。
シンプルに反転させる
ゴーストボタンだと一番ポピュラーなものがこれだと思います。
反転させるサンプル
BUTTON
hover時に、文字の色と背景色を反転させるだけでおしまい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; } .btn:hover { color: #fff; background-color: #000; } |
左からニョキっと背面が出てきて反転する
ここからは疑似要素を使うのでコードは長めになります。
左からニョキっとサンプル
BUTTON
HTMLの構造をもう少し複雑にすればcssは減りますが、基準となるものを用意していますのでこのような形にしました。
横方向はwidthプロパティを操作してあげれば実現可能です
右からニョキッとさせたいのであればleftプロパティをrightプロパティに変えるだけです
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; } .btn::before { content: ''; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 0; left: 0;/*ここをrightにすれば右から*/ width: 0; height: 100%; transition: .4s; } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; } .btn:hover::after { color: #fff; } .btn:hover::before { width: 100%; } |
上からニョキッと背面が出てきて反転する
前述したものを応用すればできると思いますが、一応用意しました
上からニョキッとサンプル
BUTTON
横方向はwidthプロパティで操作していましたが、縦方向はheightプロパティを操作することで実現可能です。
下からニョキッとさせたいのであれば、topプロパティをbottomプロパティに変えることで実現できます。
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; } .btn::before { content: ''; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 0;/*ここをbottomにすれば下から*/ left: 0; width: 100%; height: 0; transition: .4s; } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; } .btn:hover::after { color: #fff; } .btn:hover::before { height: 100%; } |
左から斜めにした背面ニョキッとが出てくる
背面を斜めにするだけで印象がガラッと変わります。
左から斜めにニョキッとサンプル
BUTTON
基本は他のものと同じだけど、skewで傾斜をつける点と、傾斜をつけたので全体を覆うためには100%以上の幅にしないとだめってところがキモ
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; } .btn::before { content: ''; display: block; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 0; left: -25%; width: 0; height: 100%; transition: .4s; transform: skewX(-50deg);/*角度はここで調整*/ } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .btn:hover::after { color: #fff; } .btn:hover::before { width: 150%;/*skewで歪ませたので大きくしないとだめ*/ } |
中心から左右に広がる
端からでなく中心からのアニメーションも可能
中心から左右にサンプル
BUTTON
要素の位置を水平方向中央にする工夫を加えるだけ
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 0; left: 50%;/*中心に寄せるその①*/ transform: translate(-50%, 0);/*中心に寄せるその②*/ width: 0; height: 100%; transition: .4s; } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .btn:hover::after { color: #fff; } .btn:hover::before { width: 100%; } |
中心から上下に広がる
一つ前のものの垂直バージョン
中心から左右にサンプル
BUTTON
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; } .btn::before { content: ''; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 50%;/*中心に寄せるその①*/ left: 0; transform: translate(0, -50%);/*中心に寄せるその②*/ width: 100%; height: 0; transition: .4s; } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .btn:hover::after { color: #fff; } .btn:hover::before { height: 100%; } |
中心から斜めで左右に広がる
斜めもいける
中心から斜めで左右にサンプル
BUTTON
|
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 |
.btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; overflow: hidden; } .btn::before { content: ''; display: block; background-color: #000; justify-content: center; align-items: center; color: #fff; position: absolute; top: 0; left: 50%;/*位置を調整*/ transform: translate(-50%, 0) skewX(-50deg);/*位置と角度を調整*/ width: 0; height: 100%; transition: .4s; } .btn::after { content: 'BUTTON'; display: flex; justify-content: center; align-items: center; color: #000; position: absolute; transition: .4s; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .btn:hover::after { color: #fff; } .btn:hover::before { width: 150%; } |
その他
その他と書きましたが一つだけしかありません
矢印が出てきて動く
かなりあっさりめだけど、色々なボタンで使えるタイプですね
矢印が出てくるサンプル
BUTTON
三角やアニメーションの回数・時間は調整可能
|
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 |
/*アニメーション設定*/ @keyframes btnAnimation { 0% { transform: translate(0, -50%); } 50% { transform: translate(5px, -50%);/*動く量は5pxの部分を調整*/ } 100% { transform: translate(0, -50%); } } .btn { display: inline-block; padding: 8px 30px; border: 1px solid #000; border-radius: 30px; color: #000; text-decoration: none; transition: .4s; position: relative; } .btn:hover::after { content: ''; position: absolute; top: 50%; right: 10px; display: inline-block; border-top: 5px solid transparent;/*三角を作るパーツ*/ border-left: 10px solid #f00;/*三角を作るパーツ 色はここで指定する*/ border-bottom: 5px solid transparent;/*三角を作るパーツ*/ transform: translate(0, -50%);/*三角の位置調整*/ animation: btnAnimation .5s linear 3 both;/*三角のアニメーション*/ } |
