CSSで実現!目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ

hovereffect2017-pts-1

 

普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。

 

今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。

 

HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。

 

コピペ可ですぐに役立つ!マテリアルデザインを極めるHTML/CSSスニペット30個まとめ

コピペで利用可!思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ

2017年大本命!HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ

 

 

CSSで実現!目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ

 

Button Hover Effects

特にウェブサイトで利用されることの多いボタン用ホバーエフェクトは、魅力的なアニメーションをCSSスタイリングで実現し、13種類のスタイルが揃います。

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

 

 

 

Button Hover Draw – CSS Only

ハイパーリンクにマウスカーソルを合わせると、長方形を描くアニメーションによってボタンスタイルに変形します。

See the Pen Button Hover Draw – CSS Only by Luke Meyrick (@lukemeyrick) on CodePen.

 

 

 

Beautiful Navigation Hover Effects

通常シンプルなつくりの多いナビゲーションも、ホバーエフェクトを加えることで見た目や使いやすさが格段にアップします。ここでは、4種類の効果的なナビメニュースタイルが披露されています。

See the Pen Beautiful navigation hover effects by Mahesh (@maheshambure21) on CodePen.

 

 

 

CSS Animations for Links

ナビゲーションメニューだけでなく、コンテンツ内のハイパーリンク用ホバーエフェクトにも適した、20種類のアニメーションがそれぞれ用意されています。

See the Pen CSS animations for links by Stas Melnikov (@melnik909) on CodePen.

 

 

 

Nice Line Movement

ハイパーリンクにカーソルを合わせるときと外すときで、異なるラインカラーをアニメーション付きで変化させるテクニック。

See the Pen Nice line movement by Bruno Almeida (@brunob182) on CodePen.

 

 

 

Wired Link Mixin

アンダーラインの太さを調整することで、よりハイパーリンクを分かりやすく、クリックしやすくしたホバエフェクトテクニックのひとつ。

See the Pen Wired Link Mixin by Thomas Vaeth (@thomasvaeth) on CodePen.

 

 

 

Imagehover.css – An Image Hover CSS Library

多彩なアニメーションが特長の画像ホバーCSSライブラリで、40種類のスタイルが19KBで表現された実践向き素材集。

See the Pen Imagehover.css – An Image Hover CSS Library by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

 

Image Hover 63 Effects

画像ホバーエフェクトをなんと63種類をまとめて用意したアニメーション用サンプル集。CSSで表現されているので、コピペも自由自在に行うことができます。

See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.

 

 

 

CSS Image Hover Effects

CSSのみで実装された画像ホバーエフェクトサンプル集で、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類が収録されています。

See the Pen demo:CSS image hover effects by Naoya (@nxworld) on CodePen.

 

 

 

Hover Effects with CSS3

写真を多く利用するギャラリー向けサムネイルなどに採用したいホバーエフェクトで、マウスカーソルに合わせたユニークな動きを表現します。

See the Pen Hover effects with CSS3 by Jacob (@JacobStone) on CodePen.

 

 

 

Card Effect

画面中央に表示されているロゴにマウスカーソルを合わせることで、背景からぼんやりとカードが立体的に浮かび上がるホバーエフェクト。

See the Pen Card effect by Alex Moore (@MoorLex) on CodePen.

 

 

 

Hover Effect Pure CSS

サムネイルにカーソルを合わせることで、ふわりと浮かせながら背後に点線ラインを表示するホバーアニメーションが素敵です。

See the Pen Hover effect – Pure CSS by Håvard Brynjulfsen (@havardob) on CodePen.

 

 

 

Card Hover Effects

あらゆるウェッブサイトのコンテンツに活用しやすい、3スタイルのカード型ホバーエフェクトを用意したサンプル集。

See the Pen Card hover effects by Jason Hee (@jasonheecs) on CodePen.

 

 

 

Material Design Box Shadow

Googleのマテリアルデザインに採用されているドロップシャドウ、ホバーエフェクトをCSSで完全再現しており、いざという時にも便利です。

See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.

 

 

 

Direction Aware 3D Hover Effect

サムネイルにマウスカーソルを合わせる方向に合わせて、ホバーエフェクトの展開方法が変化するコンセプトデザイン。

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

 

 

 

Info on Hover

モダンブラウザでの表示にも対応したツールチップ用ホバーエフェクト。各アングルへの表示をフェードアウト付アニメーションで調整しています。

See the Pen Info on Hover by Ty Strong (@tystrong) on CodePen.

 

 

 
Presskit Download Page

各種ハイパーリンクにカーソルを合わせると、サムネイルプレビューを横に表示してくれるホバーエフェクト。

See the Pen [Minimal Series] Presskit Download page by Daan (@danoszz) on CodePen.

 

 

 

Attractive Hover Effect

マウスカーソルの動きに合わせてグリグリとサムネイルを立体的に動かすことができるホバーエフェクト。

See the Pen Attract hover effect by Louis Hoebregts (@Mamboleoo) on CodePen.

 

 

 

CSS Parallax Orbs

丸いシェイプが特長のサムネイルにマウスホバーすることで、イラストが左から右に動き出すアニメーションテクニック。

See the Pen CSS Parallax Orbs by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Cube Service Box

マウスホバーすることで、カード型レイアウトが立体的に垂直方向にアニメーション展開するテクニック。

See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.

 

 

 

CSS Button Hover Effects with FontAwesome

ボタンにマウスカーソルを合わせることで、隠れていたアイコンをアニメーション付で表示するホバーエフェクトテクニック。さりげないデザインのアクセントにいかがでしょう。

See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.

 

 

 

Social Share

ボタンにカーソルを合わせることで、各種SNSアイコンがスライドアニメーションで表示されます。

See the Pen Daily UI #010: Social Share by Fabio Ottaviani (@supah) on CodePen.

 

 

 

Corner Share

右下隅に配置されたアイコンをクリックすると、ペロッとめくれた様子をCSSで再現できます。

See the Pen Corner Share by Nathaniel Watson (@nw) on CodePen.

 

 

 

Twitter Heart

ハートマークをクリックするホバーエフェクトを、パラパラ漫画のようなCSSテクニックで披露しています。

See the Pen Twitter Heart by Donovan Hutchinson (@donovanh) on CodePen.

 

 

 

Infinite Pagination

あまりカスタマイズされる機会も少ないコンテンツのページ送りにも、ホバーエフェクトを使って魅力的に仕上げることができます。

See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.

 

 

 

CSS Overlay Navigation Animation

左上隅のハンバーガーメニューをクリックすると、フルスクリーンでナビメニューが展開するホバーエフェクト。CSS Keyframe を利用することで、なめらかな開閉アニメーションを表現しています。

See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.

 

 

 

Pure CSS Click Effect

CSSのみで表現できるシンプルなエフェクトで、クリックするとふわりと半透明のフレアがと飛び出します。

See the Pen Pure CSS Click Effect by Dylan (@doggard) on CodePen.

 

 

 

CSS3 Hover Effects

バッチ型アイコンをつかったデザインに追加したい、インタラクティブなホバーアニメーション16種類が一式揃います。

See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.

 

 

 

Mana Button

CSSとSVGを駆使し、70行程のコードによって表現された、泡のようなアニメーションが素敵なボタン用ホバーエフェクト。

See the Pen Mana Button by Dean Hidri (@visualcookie) on CodePen.

 

 

 

10 Stunning Hover Effects with SCSS

文字テキストにさまざまなCSSアニメーションエフェクトを加える、10種類のユニークなホバースタイルが揃います。

See the Pen 10 stunning hover effects with scss by Renan C. Araujo (@caraujo) on CodePen.

 

 

 

10 Stylish Hover Effects with LESS

こちらも文字テキスト用ホバーエフェクト10種類セットで、各単語フレーズに関連するアニメーションがそれぞれ用意されています。

See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.

 

 

 

Sullivan Buttons

電話がジリジリとなっている様子や、はがきが送信される様子などをオリジナルのCSSアニメーションとアイコンフォントで演出できるテクニック。

See the Pen Sullivan Buttons by David Darnes (@daviddarnes) on CodePen.

 

 

 

ホバーエフェクトで迷ったらここ!膨大なコレクションを公開している LittleSnippets

 

よりオリジナル性の強いホバーエフェクトを探しているときは、LittleSnippetsを覗いてみてはいかがでしょう。画像やボタン、文字テキスト用ホバーエフェクトを中心に、インタラクティブな動きを演出したHTMLスニペットが400種類以上揃っています。以下は、同サイトで公開されているいくつかのサンプル例となります。

 

HTML/CSSで実装できる!今どきデザインのホバーエフェクト30個まとめ

 

#1585 Image Hover

See the Pen #1585 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1571 Image Hover

See the Pen #1571 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1563 Image Hover

See the Pen #1563 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1561 Image Hover

See the Pen #1561 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1556 Image Hover

See the Pen #1556 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1527 News Card

See the Pen #1527 – News Card by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

#1584 Image Hover

See the Pen #1584 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

参照元リンク : 10 Custom Hover & Click Effects With CSS & JavaScript – Speckyboy.com