【コピペでOK】サイトを印象的に!ホバーアニメーションまとめ【デモ・サンプルコード付き】
更新日:2022/05/18
ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。
ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。
また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。
コーダーにおまかせしたらかっこよくないホバーをつけられてしまった…、
なんて言われないよう、素敵なホバーアニメーションをつけて、お客さまやディレクターさんの期待に応えましょう!
本記事では、イメージ通りのアニメーションを探しやすいように、シンプル・綺麗、ポップ、スタイリッシュ・かっこいい、かわいい・柔らかい といった、イメージ別にホバーアニメーションをご紹介していきます。
デモ・サンプルコード付きですので、ご活用ください。
また、CSSアニメーションをまとめた記事もあります。
ぜひこちらもご覧いただき、サイトをリッチに演出してみてください!
イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ
サンプルを一覧で見れるデモサイトを用意しましたので、ご覧ください。
デモサイト
ベースのHTML・CSS
以下のHTML・CSSをベースに、ホバーアニメーションをつけていきます。
ボタン用・画像バナー用・テキスト用と分かれています。
また、サンプルコードにはベンダープレフィックスをつけませんので、必要に応じて適宜つけてください。
1 2 3 4 5 6 7 8 9 10 |
// ボタン <div class="c-btn">button</div> // 画像バナー <div class="c-bnr"></div> // テキスト <p class="c-txt">ホバーしてください</p> |
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 |
.c-btn, .c-bnr, .c-txt { cursor: pointer; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); } // ボタン基本コード .c-btn { background: #ff701e; border: 2px solid #ff701e; border-radius: 60px; color: #fff; display: block; font-weight: bold; max-width: 300px; padding: 15px 40px; text-align: center; } // 画像バナー基本コード .c-bnr { background: url(../img/btn-bnr.jpg)no-repeat center center / cover; display: inline-block; width: 240px; height: 240px; } // テキスト基本コード .c-txt { color: #ff701e; display: inline-block; font-size: 22px; font-weight: bold; letter-spacing: 0.06em; } |
シンプル・分かりやすい・綺麗
シンプルでスタンダードなホバーアニメーションを集めました。
組み合わせて使うと、より印象的になります。
ボタンの色が反転する
シンプルですが、見た目が大きく変わるため印象的なアニメーションです。
1 2 3 4 5 6 |
.c-btn.reverse:hover { background: #fff; color: #ff701e; } |
字間が広がる
おとなしい印象の綺麗なホバーアニメーションです。
アニメーションの秒数を長くし、ホバー時の字間を更に広げると、優しいイメージになります。
単体だとささやかなので、他のアニメーションと組み合わせてみるのもよいかと思います
1 2 3 4 5 |
.c-btn.letter-space:hover { letter-spacing: 0.15em; } |
浮き上がる
下に沈んだり、ボックスシャドウで立体感を出すなどの工夫ができます。
1 2 3 4 5 |
.c-btn.float:hover { transform: translateY(-5px); } |
ズームイン[バナー]
バナーに囲み(.zoom-box)を追加し、.c-bnr.zoomを拡大させたときに画像がはみ出ないように、overflow: hidden; をかけています。
1 2 3 4 5 |
<div class="zoom-box"> // ← 囲みを一つ増やす <div class="c-bnr zoom"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.zoom-box { display: inline-block; overflow: hidden; } .c-bnr.zoom { display: block; transition-duration: .5s; } .c-bnr.zoom:hover { transform: scale(1.2); } |
色が付く+テキスト[バナー]
ホバーで「Read More」が出てくることによって、このボタンをクリックすると詳細が見られる、ということがわかりやすくなります。
「Read More」は疑似要素(::before)で表示させています。
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 |
.c-bnr.bg { position: relative; overflow: hidden; } .c-bnr.bg::before, .c-bnr.bg::after { content: ""; display: block; position: absolute; margin: auto; top: 0; left: 0; margin: auto; transition: .3s cubic-bezier(0.45, 0, 0.55, 1); opacity: 0; } .c-bnr.bg::before { background: rgba(190,91,70,.6); width: 100%; height: 100%; } .c-bnr.bg::after { color: #fff; content: "Read More"; font-size: 22px; font-weight: bold; display: flex; text-align: center; justify-content: center; align-items: center; bottom: 0; right: 0; } .c-bnr.bg:hover::before, .c-bnr.bg:hover::after { opacity: 1; } |
ポップ・勢いがいい
ポップで元気のよい印象のホバーアニメーションを集めました。
押下
ホバーしたときに、少し立体的なボタンが凹んで、よりクリックできそうな雰囲気があります。
1 2 3 4 5 6 7 8 9 |
.c-btn.press { box-shadow: 0 4px 0 #d01a0a; // ボタンの影 } .c-btn.press:hover { transform: translateY(4px); box-shadow: none; } |
スライド
左から背景色が流れてくる、勢いのよいホバーアニメーションです。
ホバー時の「transform-origin」を「right top」に設定することで、ホバーを離したときに背景色が右に帰っていくように設定できます。
他にも右から左、真ん中から、などカスタマイズできます。
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 |
.c-btn.slide { background: #fff; color: #ff701e; overflow: hidden; position: relative; z-index: 1; } .c-btn.slide::after { background: #ff701e; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; } .c-btn.slide:hover { color: #fff; } .c-btn.slide:hover::after { transform: scale(1, 1); } |
スライド 斜め
スライドのマイナーチェンジです(コードを流用しています)。
疑似要素(::after)で作った背景色を斜めに変形させて、左斜め上から背景色が下りてくるようにします。
heightは100%だと高さが足りないため、数値を増やしておきます。
1 2 3 4 5 6 7 8 9 |
.c-btn.slide.skew::after { transform: skewY(-10deg) scale(1, 0); height: 140px; // ボタンの高さによって調整 } .c-btn.slide.skew:hover::after { transform: skewY(-10deg) scale(1, 1); } |
迫る
ホバーで拡大します。
シンプルですが、存在感のある元気な印象のホバー効果です。
1 2 3 4 5 6 7 8 |
.c-btn.big { transition-duration: .4s; } .c-btn.big:hover { transform: scale(1.1); } |
スタイリッシュ・かっこいい・スピーディー
スタイリッシュでおしゃれな印象を与えるのにぴったりなホバーアニメーションです。
グラデーションが切り替わる
background-sizeの横幅を予め200%にしておき、ホバー時にbackground-positionを横に100%移動させることで、色がガラッと変えることができます。
グラデーションは色の変化がわかりやすいように、2色ではなく3色で設定するのがおすすめです。
1 2 3 4 5 6 7 8 9 10 |
.c-btn.grad { background: linear-gradient(90deg, rgba(255,112,30,1) 0%, rgba(255,191,48,1) 50%, rgba(255,77,48,1) 100%); background-size: 200% 100%; border: none; } .c-btn.grad:hover { background-position: 100% 0; } |
ズレ
色の反転+薄い背景色がずれるアニメーションです。
「.c-btn.slip」にbackground-colorを設定すると重なり順をうまく設定できないため、黄色と薄黄色の背景色は疑似要素(::before、::after)で背景色を付けています。
囲みをひとつ増やす形でも再現できると思います。
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 |
.c-btn.slip { background: transparent; border: none; position: relative; border-radius: 0; z-index: 1; } .c-btn.slip::before, .c-btn.slip::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: auto; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); } .c-btn.slip::before { background: #ffb509; border: 2px solid #ffb509; z-index: -1; } .c-btn.slip::after { background: #fff6dc; z-index: -2; } .c-btn.slip:hover { color: #ffb509; } .c-btn.slip:hover::before { background: transparent; } .c-btn.slip:hover::after { top: 6px; left: 6px; } |
縮小[バナー]
画像をホバーすると、縮小します。
transition-durationの値を大きくすると、綺麗な印象になります。
1 2 3 4 5 6 |
.c-bnr.scale:hover { box-shadow: 0px 0px 15px 2px < |