Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。
今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。
そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。
コピペですぐ使える実用性の高いCSSボタン
サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必要かもしれません。
Button Hover States
枠線や背景がさりげなくアニメーションするゴーストボタン集です。写真の上などで使える単色のボタンとして便利です。
Colorful CSS Buttons
こちらも枠線や背景が色とりどりにアニメーションするボタン集です。様々な動作パターンが細かく用意されています。
CSS only "Material Design" Animated Buttons
マテリアルデザイン特有のクリック時の波紋エフェクトを実装したCSSボタンです。
Creative Button Styles
様々なアニメーションに対応しているCSSボタンライブラリです。「View Demo」から上記のサムネ以外のデザインのものもご覧いただけますが、フラットなデザインから3Dまで、シンプルでかわいい動きのボタンが８スタイルほど用意されています。ソースをダウンロードしてご使用下さい。
CSS Buttons with Pseudo-elements
立体的でディテールが凝っている動きのCSSボタン集です。こちらも「View Demo」から５種類のデモが確認できます。
ジェネレーター系CSSボタン
以下はサイト上でCSSボタンをカスタマイズして、コピペですぐ使えるジェネレーター系のサイトです。デザインの幅は限られてしまいますが、誰でも簡単に使えます。
2.5dBUTTON - NOHT CO.,LTD.
2.5Dという名前にもあるように、一見フラットなデザインですがマウスオーバーとクリックで立体的にアニメーションをするボタンです。サイズや形の他にもテキストや、アイコンまで設定して、出来上がったコードをダウンロードできます。
Button Generator
こちらもプレビューを見ながらボタンをカスタマイズしてCSSを生成できるサービスです。左側にサンプルのボタンがたくさん用意されているので、近いものを選んでカスタマイズするとお手軽です。
CSS Button Generator
オーソドックスなボタンCSSを項目ごとにカスタマイズし、CSSをコピペできるようになっています。特にアニメーションなどは要らない場合はこちらがお手軽です。
CSS Button Generator for your pleasure
こちらのジェネレーターも上記と似ていますが、２行目のテキストを設定できるのが特徴です。
おまけ：テクニック
CSSコピペ専用！現場ですぐに使えるボタンテクニック4つ
ボタンを構成する要素を細かく分析し、テクニックごとにコードを紹介しています。サンプルのボタンCSSを自分でカスタマイズする際などに参考にするといいかもしれません。
