Advertisement

css-button-effect

 

この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。

 

コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。

 

ウェブがますます進化し、ネット回線も高速になってきたことで、これまではむずかしかった多彩なアニメーションなど、スタイリングの幅がグッと広がっています。先日紹介した「ニューモーフィズム」の新トレンドも参考にしてみると良いでしょう。

 

skeuomorph-mobile-banking
Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事で

 

 

コピペで簡単実装!押したくなるボタンエフェクト用HTMLスニペットまとめ

 

Button Hover Effect

疑似要素を左右に配置し、アニメーションで合体させるCSSを使ったテクニック。

See the Pen
Button Hover Effect
by Daniel Gonzalez (@dan10gc)
on CodePen.

 

 

 

Paw Clap Button

ボタンをクリックすると可愛い猫の手がハイタッチするキュートすぎるエフェクト。

See the Pen
Paw Clap Button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Order button animation

注文完了ボタンを押すと、トラックに荷物が積み込まれ、走り出すインタラクティブなアニメーション。

See the Pen
Order button animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Order confirm animation

こちらもトラックへの荷物積み込みによって、注文完了をビジュアルで分かりやすくユーザーに伝えることができます。

See the Pen
Order confirm animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Neuomorphic Checkboxes

新トレンド「ニューモーフィズム」を実践したチェックボックス。背景のボタンの色が一緒、2色のドロップシャドウが利用する点がポイント。

See the Pen
Neuomorphic Checkboxes
by Braydon Coyer (@braydoncoyer)
on CodePen.

 

 

 

Playful button hover effects

ボタンホバーでポヨンとした、ちょっとかわいい動きが特長のアニメーション。

See the Pen
Playful button hover effects
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Button Hover Effects

アルファベットがぐるぐる回転する控えめなアニメーションエフェクト。

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.

 

 

 

Pure CSS dial button

円形にサブメニューを展開するダイヤル式の飛び出すボタンエフェクト。

See the Pen
Pure CSS dial button
by Jhey (@jh3y)
on CodePen.

 

 

 

Neumorphic Buttons

ユーザビリティ要検討のスタイルですが、背景の色や余白スペース、ボタンサイズなどによってうまく目立たせることもできます。

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.

 

 

 

Button – Hold to confirm

ボタンを長押しすることで完了チェックマークを表示するエフェクト。

See the Pen
Button – Hold to confirm
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Download Button Animation

クリックするとダウンロードが開始される、フラットスタイルのボタンエフェクト。

See the Pen
Download Button Animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

3D Button

思わず押したくなる立体感をCSSのみで演出したボタンスタイル。

See the Pen
3D Button
by Katherine Kato (@kathykato)
on CodePen.

 

 

 

Social Animation

各種ソーシャルアイコンにCSSアニメーションを加えた作品。シンプルな動きですが、思わず目を引くデザインが素敵。

See the Pen
Social Animation
by Swarup Kumar Kuila (@uiswarup)
on CodePen.

 

 

 

Click the button!

ボタンをクリックしようとするとマウスカーソルを取られてしい、永遠にクリックできない仕掛け。

See the Pen
Click the button!
by Bård N Hovde (@bnhovde)
on CodePen.

 

 

 

Fancy Exploding Button

ボタンを押すたびに、星やサークルなどのパーツが飛び散るホバーエフェクト。

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.

 

 

 

Download button animation

ファイルのダウンロード待ち時間も苦痛にならない、楽しいアニメーションが再現されたボタンエフェクト。

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.

 

 

 

Confetti button

ボタンをクリックするたびに奥行き感のあるホームアイコンの中で、カラフルな紙吹雪が舞うアニメーションエフェクト。

See the Pen
Confetti button
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

 

Button hover animation

ブックマークなど何かを追加したいときに便利なデザイン。

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.

 

 

 

Chroma Button

カラフルなグラデーションを全体にスタイリングしたボタンは、ホバーエフェクトもグラデーションです。

See the Pen
Chroma Button
by Sebastian Opperman (@SebastianOpperman)
on CodePen.

 

 

 

Pure CSS menu cutout effect

モバイルアプリなどのページ下に配置されたナビゲーションメニュー。その限られたスペースをより効果的に使った、CSSのみのカットアウトエフェクト。

See the Pen
Pure CSS menu cutout effect
by Zach Saucier (@ZachSaucier)
on CodePen.

 

 

 

Blobby button

クリックすると形状をぐにゃりとさせながら変化するアニメーショエフェクト。

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.

 

 

 

SCSS Beveled Buttons

立体感を表現するベベルスタイルをCSSのみで作成したサンプル例。

See the Pen
SCSS Beveled Buttons
by Brandon McConnell (@brandonmcconnell)
on CodePen.

 

 

 

Checkboxswitcher

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.

 

 

 

Liquid button

ボタンが液体のようにドロリと形を変えるユニークなエフェクト。

See the Pen
Liquid button
by Waaark (@waaark)
on CodePen.

 

 

 

Button – Fluent Design-Like

BUTTONと書かれた部分をなぞると、立体的にボタンが出現するミニマルスタイルのエフェクト。

See the Pen
Button – Fluent Design-Like
by Abubaker Saeed (@AbubakerSaeed)
on CodePen.

 

 

 

Interactive button border

ボタンに乗せたマウスカーソルの動きに合わせて、背景のグラデーションも変化するアニメーション。

See the Pen
Interactive button border
by Tobias Reich (@electerious)
on CodePen.

 

 

 

Peach Beach Button

カラフルでワクワクするような、まさにビーチタイムなグラデーションエフェクト。

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.

 

 

 

Purely CSS Button

スキューモーフィズムのようなリアルな立体感が特長のボタンは、クリックすることでダークモードに切り替わる仕掛けも。

See the Pen
Purely CSS Button
by Jorge Reyes (@jorgert1205)
on CodePen.

 

 

 

Notify me

ボタンクリックでメールアドレスの入力フォームが出現するCSSテクニック。

See the Pen
Notify me
by bertdida (@bertdida)
on CodePen.

 

 

 

Hover Over Me Button

ズームエフェクトと立体感をミックスした、新しいカタチのフラットスタイル。

See the Pen
Hover Over Me Button
by Harmandeep Singh (@hsdua2304)
on CodePen.

 

 

 

3D Button Element

ボタンがまるで空中に浮いているようなエフェクトを、アニメーションとドロップシャドウで見事に表現した作品。

See the Pen
3D Button Element
by Didzis Gruznovs (@bduuzis)
on CodePen.

 

 

 

3D Gradient Buttons

カラフルなグラデーションカラーを使い、ボタン全体やアウトラインなどをCSSのみでスタイリングするテクニック。

See the Pen
3D Gradient Buttons
by Sietse (@firepenguin)
on CodePen.

 

 

 

Social Expand

プラスマークをクリックすると、各種ソーシャルメディアアイコンが立体的に表示されます。

See the Pen
Social Expand
by Mariusz Dabrowski (@MarioD)
on CodePen.

 

 

 

Gradient Button Hover

鮮やかなグラデーションカラーを多数用いてスタイリングされたボタンエフェクト12種類セット。

See the Pen
Gradient Button Hover
by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.

 

 

これまでのボタンエフェクトを確認してみよう

 

いかがでしたでしょう。ボタンといっても、一言で表せないほどさまざまなスタイルを反映することができます。

 

デザインアイデアをもっと探しているというひとは、以下のエントリーも参考にしてみてはいかがでしょう。これまでに紹介したクリエイティブなボタンエフェクトに出会えるかもしれません。

 

latest-button-hover-effect-feat-image
CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテク
latestbuttoneffect2017summer
CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニック
hovereffect2016june 2 (1)
HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめて
buttonhover2016march-top
魅力的なボタンデザインは、ウェブサイトの注目ポイントを効果的に演出する、重要なデザイン要素です。今回は、CSSのみでスタイリングできる、ボタン用コードスニペットをま
css-button-top
CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテク

 

サムネイル@ : Book Button by Webshocker – Matjaz Valentar – Dribbble.com