コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。
すこし前までは実現が難しかったエフェクトも、CSS3をつかったテクニックを利用することでより手軽に実現できるようになっています。世界中のデザイナーが作成したボタンデザインを確認しながら、マイクロインタラクションなど最先端のデザイントレンドを、プロジェクトに取り入れてみてはいかがでしょう。
詳細は以下から。
CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選
「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きましょう。
01. 12 Fancy Button
コピー＆ペーストで利用できる、合計12種類のボタンスタイルをまとめています。
See the Pen 12 fancy buttons by bartekd (@bartekd) on CodePen.
02. Micro Interaction Button
ボタンをクリックしようとすると矢印アイコンを表示し、ユーザーにクリックを促します。
See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.
03. Button with Arrow on Hover
こちらもマウスホバーで矢印を表示するテクニック。じつは当サイトでもトップページに利用しています。
See the Pen Button with arrow on hover by Nicholas Petersen (@nicholaspetersen) on CodePen.
04. Button Explorer
こちらも矢印アイコンを利用したアニメーションで、多くのデザイナーがこのテクニックに挑戦しているようです。
See the Pen Button Explore by Nicolas Lanthemann (@vanderlanth) on CodePen.
05. Folding Button
ボタンにマウスホバーすると、折りたたんでいる文字テキストが表示されます。
See the Pen Folding Button by Hornebom (@Hornebom) on CodePen.
06. Fireworks Button
タイトルの通り、クリックすると花火のような飛び散るエフェクト。
See the Pen Fireworks Button 😀 by Alex Zaworski (@alexzaworski) on CodePen.
07. Ripple Modal Effect
ボタンクリックで画面スクリーン全体にナビメニューを表示するマテリアル仕様。
See the Pen Ripple Modal Effect by Marcos Mellado (@mmellado) on CodePen.
08. Cool Beans Button
マテリアルデザインの波型エフェクトをモチーフにした、CSSオンリーでスタイリングされたボタン。
See the Pen Cool Beans Button 60fps by BROWNERD (@brownerd) on CodePen.
09. Button Hover Animation
ボタンの中心から波形のように色が切り替わるテクニックで、こちらもCSSのみでスタイリングされています。
See the Pen Button Hover Animation by Chris Ota (@chrisota) on CodePen.
10. Just a Button with waves.js
波型エフェクトを手軽に実現できる waves.js を利用した、マテリアルデザイン型ボタンエフェクト。
See the Pen Just a button with waves.Js by stavros avramidis (@asder) on CodePen.
11. Filter SVG
SVG ファイルに @keyframes アニメーションを実装することで、暗闇にぼんやりと輝くネオンエフェクトを実現しています。
See the Pen Filter SVG by @BrawadaCom (@Anna_Batura) on CodePen.
12. Three Simple CSS Button Hover Effects
ふわりとした滑らかな動きを表現した、ボタンホバーエフェクト用スタイリング３種。
See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.
13. Bold Button Hover State
See the Pen Bold Button Hover State by Caree Belle (@careebelle) on CodePen.
14. CSS Cube Transition
画面ごとくるりと回転するアニメーションがユニーク。
See the Pen CSS cube transition by Philip Zastrow (@zastrow) on CodePen.
15. Animated Button Hover Effect
シンプルなホバーエフェクトですが、文字テキスト色の変化など細かい点もポイント。
See the Pen Animated Button Hover Effect by Colette Wilson (@colette-wilson) on CodePen.
16. Favorite Hover Link Styles
シンプルで真似しやすいホバーリンク・エフェクトをまとめたHTMLスニペット。
See the Pen kXjZqo by rtrsmarian (@rtrsmarian) on CodePen.
17. Simplistic Dialog
ボタンクリックでふわりと表示されるModalウィンドウ。
See the Pen Simplistic Dialog by Tristan White (@triss90) on CodePen.
18. Button
See the Pen Button by Kyle Lavery (@koenigsegg1) on CodePen.
19. Outline Buttons with Additional Info with Hover
マウスホバーすることで追加情報を表示するテクニック。
See the Pen Outline Buttons with Additional Information on Hover by Aditya Bhandari (@takeradi) on CodePen.
20. Cool Button Hover Effect
マウスホバーでラインにアニメーションを加える、シンプルなCSSスタイリング用テクニック。
See the Pen Cool button hover effect by Elena Nazarova (@nazarelen) on CodePen.
21. #1535 Button
アウトラインがポイントのボタンスタイルは、CSSのみでスタイリングされています。
See the Pen #1535 – Button by LittleSnippets.net (@littlesnippets) on CodePen.
22. #1465 Button
マウスホバーでピクセルドット上に展開するスタイリング。
See the Pen #1465 – Menus by LittleSnippets.net (@littlesnippets) on CodePen.
23. Sharing Button Effects
カード状パネルにホバーすることで、SNSシェアボタンを表示するアニメーション・テクニック全３種。
See the Pen Sharing Button Effects by Dronca Raul (@rauldronca) on CodePen.
24. Notification
ツールチップで追加したい内容を表示するので、コンパクトで狭いスペースにもぴったりです。
See the Pen Notifications by evans (@evanscode) on CodePen.
25. Action Button Only CSS
CSS のみでスタイリングされた、マウスホバーで展開するコンパクトなボタンデザイン。
See the Pen Action Button. Only CSS by @BrawadaCom (@Anna_Batura) on CodePen.
26. Plus Minus Morphing Button
プラスとマイナスへ交互に切り替わる、CSSでスタイリングされたモーフィング・エフェクト。
See the Pen Plus Minus Morphing Button by Sven Lötscher (@svelts) on CodePen.
27. Open / Close Button Animation
ハンバーガーメニューに使われているラインが、マウスクリックでするりと移動します。
See the Pen Open / Close button animation by Jerome Renders (@JeromeRenders) on CodePen.
28. Animated Dial Button
See the Pen Animated dial buttons by jh3y (@jh3y) on CodePen.
29. Upload Button
ファイルのアップロード進捗状況を分かりやすく伝えるボタン。
See the Pen Upload Button by eva (@eva_trostlos) on CodePen.
30. Submit Button with Built-in Loading Indicator
ボタンを押すとローディング・アニメーションで読み込みタイミングを伝えます。
See the Pen Submit Buttons with Built-in Loading Indicator by Elior Shalev Tabeka (@eliorshalev) on CodePen.
31. CSS Hover Tip
思わずボタンをクリックしたくなる、滑らかなホバーアニメーションを実現しています。
See the Pen CSS :hover Tips by Scott Polhemus (@ScottPolhemus) on CodePen.
32. Pure CSS Pagination
ページ数に応じてボタン数が変化する、ページ送りに使いたいコンポーネント。
See the Pen Pure CSS pagination by Brendan Mullins (@jsnanigans) on CodePen.
33. A Morphing Play/Pause Button
ビデオ動画の再生ボタンをクリックすると、モーフィング・エフェクトでアイコンの形が変化します。
See the Pen A Morphing Play-Pause Button for HTML5 Video with SVG by Dudley Storey (@dudleystorey) on CodePen.
34. Animated Vote Buttons
クリックするたびに波形エフェクトを追加するテクニック。
See the Pen Animated vote buttons (pure css) by Valeriya (@wwwebneko) on CodePen.
35. CSS Flip Checkbox
クリックするとパタリと回転するチェックボックス。
See the Pen CSS Flip Check by Ian Turner (@iamturner) on CodePen.
36. Distorted Button
ブラウン管のテレビ映像が乱れたような、グリッチエフェクトのCSSテクニック。
See the Pen Distorted Button by Carlos1162 (@Carlos1162) on CodePen.
37. High Voltaire
ボタンをクリックすると爆発シーンが流れる仕掛けが。
See the Pen Highly Volatile by Nick Perez Rivera (@npr) on CodePen.
38. Scroll Indicator
下方向へのスクロールを促すエフェクトは、今後より重要になってくるパーツのひとつ。
See the Pen Scroll Indicator by Vlad Shapochnikov (@vladshap) on CodePen.
39. Gooey Scroll Arrow
ヌルリとした動きが特長のアニメーションで、@keyframes を利用して実現しています。
See the Pen Gooey Scroll Arrow by Simone Viani (@flik185) on CodePen.
40. CSS Site Scroll Micro Interaction
ほんのわずかなアニメーションを加えることで、ユーザビリティを大きく改善できるポイント。
See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
