魅力的なボタンデザインは、ウェブサイトの注目ポイントを効果的に演出する、重要なデザイン要素です。今回は、CSSのみでスタイリングできる、ボタン用コードスニペットをまとめて、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。
HTML/CSS、そして簡単なJSのみで作成された素材が中心で、エフェクトと一緒にコードも確認できるだけでなく、コピペで自由に活用することもできます。CSS の広がる可能性を感じる、最先端のデザインエフェクトを取り入れてみてはいかがでしょう。
詳細は以下から。
CSSで実装できる、思わず押したくなるボタン用コードスニペットまとめ
ボタンホバーで対角線状に塗りつぶす、グラデーションカラーを利用したスタイリング。
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.
ホバーすることでボタンが下線ラインに変化する、シンプルだけど効果的なアニメーション。
See the Pen Hover effect by zessx (@zessx) on CodePen.
まるで手描きしたようなラフさが素敵なボタンで、ホバーすることで自然なドロップシャドウも追加されます。
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 を少しだけ利用することで、パタパタとめくれるようなアニメーションエフェクトを再現しています。
See the Pen jQuery +3D css button by Carlos G Notario (@CarlosGNotario) on CodePen.
ボタンをクリックする度に、背景色ごと切り替えることができます。
See the Pen Switcher XVlll by Oleg Frolov (@Volorf) on CodePen.
検索が楽しみになりそうな、面白いアニメーションが特長で、アイコンをクリックすることで、検索バーが出現します。
See the Pen CSS Search Box by Jamie Coulter (@jcoulterdesign) on CodePen.
時間が経過するにつれて、数字カウント付きで通知メッセージを伝えます。
See the Pen notification with count by Mahesh (@maheshambure21) on CodePen.
クリックで展開するハンバーガーメニューは、デスクトップとモバイルに対応する、レスポンシブデザインが特長です。
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.
ボタンクリックして数秒後に、ポップアップのメッセージを表示できます。
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.
ぼんやりと展開する、滑らかなアニメーションを追加し、読み込み中であることをうまく伝えます。
See the Pen Animated Loading button by Dead Seagull (@dead_seagull) on CodePen.
CSSのみで作成された、さまざまな種類のボタン素材をまとめて収録しています。
See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.
背景カラーを少しだけずらし、太めのボーダーラインが印象的なスタイル。
See the Pen Button Tinkering by Patrick Hildebrandt (@phildebrandt) on CodePen.
SVGモーフィング・テクニックを利用することで、ボタンクリックでアイコンを滑らかなアニメーションで変化させます。
See the Pen Material subscribe button by Nathaniel Watson (@nw) on CodePen.
これからより利用機会が増えてくるであろう、SVGアイコンを利用したスタイリング。
See the Pen SVG Icon Buttons by Ettrics (@ettrics) on CodePen.
クリックすることでスクリーン画面いっぱいに広がり、SNSシェアボタンを表示します。
See the Pen Social Share Button by Kyle Lavery (@koenigsegg1) on CodePen.
ボタンをクリックすることで、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.
SNSシェア状況を、ポップアップでより詳しく表示するアニメーションがポイント。
See the Pen Expanding Share Button by Sandro Walet (@tamashi) on CodePen.
ローディング状況がより分かりやすい、プログレスバーを活用し、アイコンで完了したかどうかを伝えます。
See the Pen Funky Loader by Jack Thomson (@Jackthomsonn) on CodePen.
CSSでスタイリングされた、ローディングアニメーション付きボタン素材。
See the Pen Pure CSS Loading Bar Button by Jamie Coulter (@jcoulterdesign) on CodePen.
バブル状の個性たっぷりなページネーションは、SVGを利用したユニークなアニメーションが特長。
See the Pen SVG Bubble Slider by Chris Gannon (@chrisgannon) on CodePen.
ハート型を利用したかわいいデザインは、スライダー用ページネーションなどにどうぞ。
See the Pen Radio Button Heart by ari (@tari) on CodePen.
See the Pen #1457 – Buttons by LittleSnippets.net (@littlesnippets) on CodePen.
アイコンをデザインアクセントとして利用した、ズームアニメーション付きボタン。
See the Pen #1434 – Button by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーでアイコンの背景カラーのみが変化する、技のきいたスタイリングテクニック。
See the Pen #1372 – Button by LittleSnippets.net (@littlesnippets) on CodePen.
実際にボタンをクリックしているような、立体的なスタイリングが特長のCSSボタン。
See the Pen 3D scss button by Alex (@Alex_Taie) on CodePen.
立体的なボタンをクリックすると、ポップアップでウィンドウ画面を表示します。
See the Pen Swing Out Modal by Michael Smith (@MichaelRyanSmith) on CodePen.
マウスホバーすることで、メニュー用アイコンがアニメーション展開します。
See the Pen User profile button by Foolproof (@foolproof) on CodePen.
マテリアルデザインをテーマに作成された、動きのあるラジオボタン。
See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.
トグルスイッチを切り替えることで、朝と夜を変更できるユニークなギミックも。
See the Pen Simple switch button by Alexey Kagan (@Tiko) on CodePen.
JS を利用せずに、CSSのみでスタイリングされたトグルボタン。
See the Pen CSS Switches by daniesy (@daniesy) on CodePen.
ぬるっとしたモーフィング・エフェクトが気持ちいい、トグル用スタイリング。
See the Pen WrqoOp by Thomas Podgrodzki (@Podgro) on CodePen.
ボタンをクリックすることで、スマイル絵文字にアニメーション変化します。
See the Pen Happy Button by Pavel Laptev (@PavelLaptev) on CodePen.
ボタンをクリックすることで、カラフルに背景カラーが絶えず変化する、ユニークなアニメーショントリック。
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.
