Advertisement

buttonhover2016march-top

 

魅力的なボタンデザインは、ウェブサイトの注目ポイントを効果的に演出する、重要なデザイン要素です。今回は、CSSのみでスタイリングできる、ボタン用コードスニペットをまとめて、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。

 

 

HTML/CSS、そして簡単なJSのみで作成された素材が中心で、エフェクトと一緒にコードも確認できるだけでなく、コピペで自由に活用することもできます。CSS の広がる可能性を感じる、最先端のデザインエフェクトを取り入れてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

CSSで実装できる、思わず押したくなるボタン用コードスニペットまとめ

 

Diagonal Gradient Fill Button

ボタンホバーで対角線状に塗りつぶす、グラデーションカラーを利用したスタイリング。

See the Pen Diagonal gradient fill button by Eli Fitch (@EliFitch) on CodePen.

 

 

 

Awesome Split-in-Half Hover Effect

今年よく見かけるアニメーションのひとつ、スプリット・エフェクトを活用した、ポップアップするような動きが◎。

See the Pen Awesome split-in-half hover effect by Kriszta (@vajkri) on CodePen.

 

 

 

Hover Effect

ホバーすることでボタンが下線ラインに変化する、シンプルだけど効果的なアニメーション。

See the Pen Hover effect by zessx (@zessx) on CodePen.

 

 

 

Imperfect Button

まるで手描きしたようなラフさが素敵なボタンで、ホバーすることで自然なドロップシャドウも追加されます。

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

 

 

 

Buttons Status Made with Patterns

パターンテクスチャ素材を利用し、アニメーションを一緒に追加することで、よりインタラクティブな動きを表現しています。

See the Pen Buttons status made with patterns by ruggero (@ruggero) on CodePen.

 

 

 

jQuery 3D CSS Button

jQuery を少しだけ利用することで、パタパタとめくれるようなアニメーションエフェクトを再現しています。

See the Pen jQuery +3D css button by Carlos G Notario (@CarlosGNotario) on CodePen.

 

 

 

Swithcer XVlll

ボタンをクリックする度に、背景色ごと切り替えることができます。

See the Pen Switcher XVlll by Oleg Frolov (@Volorf) on CodePen.

 

 

 

CSS Search Box

検索が楽しみになりそうな、面白いアニメーションが特長で、アイコンをクリックすることで、検索バーが出現します。

See the Pen CSS Search Box by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Notification with Count

時間が経過するにつれて、数字カウント付きで通知メッセージを伝えます。

See the Pen notification with count by Mahesh (@maheshambure21) on CodePen.

 

 

 

Pure CSS Header Menu

クリックで展開するハンバーガーメニューは、デスクトップとモバイルに対応する、レスポンシブデザインが特長です。

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

 

 

 

Daily UI #011: Flash Message

ボタンクリックして数秒後に、ポップアップのメッセージを表示できます。

See the Pen Daily UI #011: Flash Message (Error/Success) by Fabio Ottaviani (@supah) on CodePen.

 

 

 

Send Button Interaction Animation

ファイルアップロードの状況を、より分かりやすくユーザーに伝えることができる、ローディングアニメーションを活用したアイテム。

See the Pen Send button interaction animation by Irem Lopsum (@iremlopsum) on CodePen.

 

 

 

Animated Loading Button

ぼんやりと展開する、滑らかなアニメーションを追加し、読み込み中であることをうまく伝えます。

See the Pen Animated Loading button by Dead Seagull (@dead_seagull) on CodePen.

 

 

 

CSS Buttons

CSSのみで作成された、さまざまな種類のボタン素材をまとめて収録しています。

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

 

 

 

Button Tinkering

背景カラーを少しだけずらし、太めのボーダーラインが印象的なスタイル。

See the Pen Button Tinkering by Patrick Hildebrandt (@phildebrandt) on CodePen.

 

 

 

Material Subscribe Button

SVGモーフィング・テクニックを利用することで、ボタンクリックでアイコンを滑らかなアニメーションで変化させます。

See the Pen Material subscribe button by Nathaniel Watson (@nw) on CodePen.

 

 

 

SVG Icon Buttons

これからより利用機会が増えてくるであろう、SVGアイコンを利用したスタイリング。

See the Pen SVG Icon Buttons by Ettrics (@ettrics) on CodePen.

 

 

 

Social Share Button

クリックすることでスクリーン画面いっぱいに広がり、SNSシェアボタンを表示します。

See the Pen Social Share Button by Kyle Lavery (@koenigsegg1) on CodePen.

 

 

 

Stay in Touch / Share Button

ボタンをクリックすることで、SNSシェアボタンや文字テキストなどを、フルスクリーン画面で自由に表示できます。

See the Pen Stay in touch/share button by Fralec (@fralec) on CodePen.

 

 

 

SNS Button Simple Hover Effect

ボタンホバーで文字テキストをアニメーション付きで表示する、シンプルで使い勝手のよいCSSボタン。

See the Pen SNS Button Simple hover effect by Ryota Kitagawa (@ryok_codepen) on CodePen.

 

 

 

Expanding Share Button

SNSシェア状況を、ポップアップでより詳しく表示するアニメーションがポイント。

See the Pen Expanding Share Button by Sandro Walet (@tamashi) on CodePen.

 

 

 

Funky Loader

ローディング状況がより分かりやすい、プログレスバーを活用し、アイコンで完了したかどうかを伝えます。

See the Pen Funky Loader by Jack Thomson (@Jackthomsonn) on CodePen.

 

 

 

Pure CSS Loading Bar Button

CSSでスタイリングされた、ローディングアニメーション付きボタン素材。

See the Pen Pure CSS Loading Bar Button by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

SVG Bubble Slider

バブル状の個性たっぷりなページネーションは、SVGを利用したユニークなアニメーションが特長。

See the Pen SVG Bubble Slider by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Radio Button Heart

ハート型を利用したかわいいデザインは、スライダー用ページネーションなどにどうぞ。

See the Pen Radio Button Heart by ari (@tari) on CodePen.

 

 

 

#1457 Buttons

See the Pen #1457 – Buttons by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

 

#1434 Buttons

アイコンをデザインアクセントとして利用した、ズームアニメーション付きボタン。

See the Pen #1434 – Button by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

 

#1372 Buttons

マウスホバーでアイコンの背景カラーのみが変化する、技のきいたスタイリングテクニック。

See the Pen #1372 – Button by LittleSnippets.net (@littlesnippets) on CodePen.

 

 

 

3D SCSS Button

実際にボタンをクリックしているような、立体的なスタイリングが特長のCSSボタン。

See the Pen 3D scss button by Alex (@Alex_Taie) on CodePen.

 

 

 

Swing Out Modal

立体的なボタンをクリックすると、ポップアップでウィンドウ画面を表示します。

See the Pen Swing Out Modal by Michael Smith (@MichaelRyanSmith) on CodePen.

 

 

 

Uer Profile Button

マウスホバーすることで、メニュー用アイコンがアニメーション展開します。

See the Pen User profile button by Foolproof (@foolproof) on CodePen.

 

 

 

Material Radio Button

マテリアルデザインをテーマに作成された、動きのあるラジオボタン。

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

 

 

 

Simple Switch Button

トグルスイッチを切り替えることで、朝と夜を変更できるユニークなギミックも。

See the Pen Simple switch button by Alexey Kagan (@Tiko) on CodePen.

 

 

 

CSS Switcher

JS を利用せずに、CSSのみでスタイリングされたトグルボタン。

See the Pen CSS Switches by daniesy (@daniesy) on CodePen.

 

 

 

Morphing Radio Button

ぬるっとしたモーフィング・エフェクトが気持ちいい、トグル用スタイリング。

See the Pen WrqoOp by Thomas Podgrodzki (@Podgro) on CodePen.

 

 

 

Happy Button

ボタンをクリックすることで、スマイル絵文字にアニメーション変化します。

See the Pen Happy Button by Pavel Laptev (@PavelLaptev) on CodePen.

 

 

 

The Fun Button

ボタンをクリックすることで、カラフルに背景カラーが絶えず変化する、ユニークなアニメーショントリック。

See the Pen the fun button by Erick Hernandez (@ehzdesigncompany) on CodePen.

 

 

 

Re: Apple Keyboard in Pure CSS

CSSのみで再現された、本物そっくりの Apple キーボードは、タイプにも対応しています。

See the Pen Re: Apple Keyboard in pure CSS. by Joey Anuff (@januff) on CodePen.