CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選

latestbutton2016aug (1)

 

コンテンツに注目を集めたいときに便利な、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

ふわりとした滑らかな動きを表現した、ボタンホバーエフェクト用スタイリング3種。

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シェアボタンを表示するアニメーション・テクニック全3種。

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.