この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。
コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。
ウェブがますます進化し、ネット回線も高速になってきたことで、これまではむずかしかった多彩なアニメーションなど、スタイリングの幅がグッと広がっています。先日紹介した「ニューモーフィズム」の新トレンドも参考にしてみると良いでしょう。
コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペットまとめ
疑似要素を左右に配置し、アニメーションで合体させるCSSを使ったテクニック。
See the Pen
Button Hover Effect by Daniel Gonzalez (@dan10gc)
on CodePen.
ボタンをクリックすると可愛い猫の手がハイタッチするキュートすぎるエフェクト。
See the Pen
Paw Clap Button by Aaron Iker (@aaroniker)
on CodePen.
注文完了ボタンを押すと、トラックに荷物が積み込まれ、走り出すインタラクティブなアニメーション。
See the Pen
Order button animation by Aaron Iker (@aaroniker)
on CodePen.
こちらもトラックへの荷物積み込みによって、注文完了をビジュアルで分かりやすくユーザーに伝えることができます。
See the Pen
Order confirm animation by Aaron Iker (@aaroniker)
on CodePen.
新トレンド「ニューモーフィズム」を実践したチェックボックス。背景のボタンの色が一緒、2色のドロップシャドウが利用する点がポイント。
See the Pen
Neuomorphic Checkboxes by Braydon Coyer (@braydoncoyer)
on CodePen.
ボタンホバーでポヨンとした、ちょっとかわいい動きが特長のアニメーション。
See the Pen
Playful button hover effects by Aaron Iker (@aaroniker)
on CodePen.
アルファベットがぐるぐる回転する控えめなアニメーションエフェクト。
See the Pen
Button Hover Effects by Aaron Iker (@aaroniker)
on CodePen.
Gradient color button with hover glow
ボタンの柄がグラデーションカラーをそのままドロップシャドウの色として利用したホバーエフェクト。
See the Pen
Gradient color button with hover glow by Jesper Lauridsen (@justjspr)
on CodePen.
Glass effect social media buttons with neon glow
ニューモーフィズムにカラフルなグラデーションカラーを加えることで、また違った印象に仕上げることができます。
See the Pen
Glass effect social media buttons with neon glow by Kevin Miranda (@kevinmiranda)
on CodePen.
円形にサブメニューを展開するダイヤル式の飛び出すボタンエフェクト。
See the Pen
Pure CSS dial button by Jhey (@jh3y)
on CodePen.
ユーザビリティ要検討のスタイルですが、背景の色や余白スペース、ボタンサイズなどによってうまく目立たせることもできます。
See the Pen
Neumorphic Buttons by Dev Loop (@dev_loop)
on CodePen.
#04animation: send button transforms into birds
ボタンクリックで無数の鳥たちが飛び立ち、一枚の羽をひらりと残すにくい演出。
See the Pen
#04animation: send button transforms into birds by Claudia (@eyesight)
on CodePen.
ボタンを長押しすることで完了チェックマークを表示するエフェクト。
See the Pen
Button – Hold to confirm by Aaron Iker (@aaroniker)
on CodePen.
クリックするとダウンロードが開始される、フラットスタイルのボタンエフェクト。
See the Pen
Download Button Animation by Aaron Iker (@aaroniker)
on CodePen.
思わず押したくなる立体感をCSSのみで演出したボタンスタイル。
See the Pen
3D Button by Katherine Kato (@kathykato)
on CodePen.
各種ソーシャルアイコンにCSSアニメーションを加えた作品。シンプルな動きですが、思わず目を引くデザインが素敵。
See the Pen
Social Animation by Swarup Kumar Kuila (@uiswarup)
on CodePen.
ボタンをクリックしようとするとマウスカーソルを取られてしい、永遠にクリックできない仕掛け。
See the Pen
Click the button! by Bård N Hovde (@bnhovde)
on CodePen.
ボタンを押すたびに、星やサークルなどのパーツが飛び散るホバーエフェクト。
See the Pen
Fancy Exploding Button by Takane Ichinose (@takaneichinose)
on CodePen.
Pure CSS Ghost Buttons w/ Directional Awareness ✨
クリックする場所によって、上下左右方向から自由にエフェクトが切り替わるゴーストボタン。
See the Pen
Pure CSS Ghost Buttons w/ Directional Awareness ✨ by Jhey (@jh3y)
on CodePen.
ファイルのダウンロード待ち時間も苦痛にならない、楽しいアニメーションが再現されたボタンエフェクト。
See the Pen
Download button animation by Aaron Iker (@aaroniker)
on CodePen.
表示されたサークル円の中にマウスカーソルが入ると、拡声器をもった棒人間がボタンクリックを促します。
See the Pen
Call to Action Hype Man by Mariusz Dabrowski (@MarioD)
on CodePen.
ボタンをクリックするたびに奥行き感のあるホームアイコンの中で、カラフルな紙吹雪が舞うアニメーションエフェクト。
See the Pen
Confetti button by Mikael Ainalem (@ainalem)
on CodePen.
ブックマークなど何かを追加したいときに便利なデザイン。
See the Pen
Button hover animation by Danil Goncharenko (@Danil89)
on CodePen.
Hamburger 3D CSS Switch animation
通常のハンバーガーメニューの展開とは異なり、クリックでくるりとフリップ式に回転するホバーエフェクト。
See the Pen
Hamburger 3D CSS Switch animation by Aaron Iker (@aaroniker)
on CodePen.
カラフルなグラデーションを全体にスタイリングしたボタンは、ホバーエフェクトもグラデーションです。
See the Pen
Chroma Button by Sebastian Opperman (@SebastianOpperman)
on CodePen.
モバイルアプリなどのページ下に配置されたナビゲーションメニュー。その限られたスペースをより効果的に使った、CSSのみのカットアウトエフェクト。
See the Pen
Pure CSS menu cutout effect by Zach Saucier (@ZachSaucier)
on CodePen.
クリックすると形状をぐにゃりとさせながら変化するアニメーショエフェクト。
See the Pen
Blobby button by Cassie Evans (@cassie-codes)
on CodePen.
An Animated Blobby Gooey Button
まるでボタンに意思があるかのように、絶えず形を変えながら変化する不思議なアニメーション。
See the Pen
An Animated Blobby Gooey Button by Leena Lavanya (@leenalavanya)
on CodePen.
立体感を表現するベベルスタイルをCSSのみで作成したサンプル例。
See the Pen
SCSS Beveled Buttons by Brandon McConnell (@brandonmcconnell)
on CodePen.
On/Offがユーザーにも分かりやすく伝わるアクションのチェックボックス。
See the Pen
Checkboxswitcher by Oleg Frolov (@Volorf)
on CodePen.
CSS Animations: Obvious CTA Buttons
まさに「ボタンを押してください。」と言わんばかりの主張が強い、CTAボタン向けアニメーションエフェクト8種類。
See the Pen
CSS Animations: Obvious CTA Buttons by Olivia Ng (@oliviale)
on CodePen.
#CodepenChallenge Ripple button with VueJS
Vue.JSをつかって、マテリアルデザインのボタンに採用されているRippleエフェクトを再現します。
See the Pen
#CodepenChallenge Ripple button with VueJS by Takane Ichinose (@takaneichinose)
on CodePen.
ボタンが液体のようにドロリと形を変えるユニークなエフェクト。
See the Pen
Liquid button by Waaark (@waaark)
on CodePen.
BUTTONと書かれた部分をなぞると、立体的にボタンが出現するミニマルスタイルのエフェクト。
See the Pen
Button – Fluent Design-Like by Abubaker Saeed (@AbubakerSaeed)
on CodePen.
ボタンに乗せたマウスカーソルの動きに合わせて、背景のグラデーションも変化するアニメーション。
See the Pen
Interactive button border by Tobias Reich (@electerious)
on CodePen.
カラフルでワクワクするような、まさにビーチタイムなグラデーションエフェクト。
See the Pen
Peach Beach Button by Ann H. (@merkund)
on CodePen.
Progress Button Microinteractions with VueJS
進捗プログレスバーとボタンを組み合わせ、よりわかりやすいアップロードボタンに仕上がりました。
See the Pen
Progress Button Microinteractions with VueJS by Takane Ichinose (@takaneichinose)
on CodePen.
スキューモーフィズムのようなリアルな立体感が特長のボタンは、クリックすることでダークモードに切り替わる仕掛けも。
See the Pen
Purely CSS Button by Jorge Reyes (@jorgert1205)
on CodePen.
ボタンクリックでメールアドレスの入力フォームが出現するCSSテクニック。
See the Pen
Notify me by bertdida (@bertdida)
on CodePen.
ズームエフェクトと立体感をミックスした、新しいカタチのフラットスタイル。
See the Pen
Hover Over Me Button by Harmandeep Singh (@hsdua2304)
on CodePen.
ボタンがまるで空中に浮いているようなエフェクトを、アニメーションとドロップシャドウで見事に表現した作品。
See the Pen
3D Button Element by Didzis Gruznovs (@bduuzis)
on CodePen.
カラフルなグラデーションカラーを使い、ボタン全体やアウトラインなどをCSSのみでスタイリングするテクニック。
See the Pen
3D Gradient Buttons by Sietse (@firepenguin)
on CodePen.
プラスマークをクリックすると、各種ソーシャルメディアアイコンが立体的に表示されます。
See the Pen
Social Expand by Mariusz Dabrowski (@MarioD)
on CodePen.
鮮やかなグラデーションカラーを多数用いてスタイリングされたボタンエフェクト12種類セット。
See the Pen
Gradient Button Hover by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.
これまでのボタンエフェクトを確認してみよう
いかがでしたでしょう。ボタンといっても、一言で表せないほどさまざまなスタイルを反映することができます。
デザインアイデアをもっと探しているというひとは、以下のエントリーも参考にしてみてはいかがでしょう。これまでに紹介したクリエイティブなボタンエフェクトに出会えるかもしれません。
サムネイル@ : Book Button by Webshocker – Matjaz Valentar – Dribbble.com
