最新トレンドにも対応!コピペで使える実用性重視なCSSボタン9選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。

今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。

そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。

コピペですぐ使える実用性の高いCSSボタン

サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必要かもしれません。

Button Hover States

buttonhoverstates2

枠線や背景がさりげなくアニメーションするゴーストボタン集です。写真の上などで使える単色のボタンとして便利です。

Colorful CSS Buttons

colorfulcssbuttons

こちらも枠線や背景が色とりどりにアニメーションするボタン集です。様々な動作パターンが細かく用意されています。

CSS only "Material Design" Animated Buttons

materialbutton

マテリアルデザイン特有のクリック時の波紋エフェクトを実装したCSSボタンです。

Creative Button Styles

eyecatches_button

様々なアニメーションに対応しているCSSボタンライブラリです。「View Demo」から上記のサムネ以外のデザインのものもご覧いただけますが、フラットなデザインから3Dまで、シンプルでかわいい動きのボタンが8スタイルほど用意されています。ソースをダウンロードしてご使用下さい。

CSS Buttons with Pseudo-elements

screenshot 276

立体的でディテールが凝っている動きのCSSボタン集です。こちらも「View Demo」から5種類のデモが確認できます。

ジェネレーター系CSSボタン

以下はサイト上でCSSボタンをカスタマイズして、コピペですぐ使えるジェネレーター系のサイトです。デザインの幅は限られてしまいますが、誰でも簡単に使えます。

2.5dBUTTON - NOHT CO.,LTD.

screenshot 272

2.5Dという名前にもあるように、一見フラットなデザインですがマウスオーバーとクリックで立体的にアニメーションをするボタンです。サイズや形の他にもテキストや、アイコンまで設定して、出来上がったコードをダウンロードできます。

Button Generator

screenshot 274

こちらもプレビューを見ながらボタンをカスタマイズしてCSSを生成できるサービスです。左側にサンプルのボタンがたくさん用意されているので、近いものを選んでカスタマイズするとお手軽です。

CSS Button Generator

cssbuttongen

オーソドックスなボタンCSSを項目ごとにカスタマイズし、CSSをコピペできるようになっています。特にアニメーションなどは要らない場合はこちらがお手軽です。

CSS Button Generator for your pleasure

cssbuttongenerator

こちらのジェネレーターも上記と似ていますが、2行目のテキストを設定できるのが特徴です。

おまけ:テクニック

CSSコピペ専用!現場ですぐに使えるボタンテクニック4つ

screenshot 278

ボタンを構成する要素を細かく分析し、テクニックごとにコードを紹介しています。サンプルのボタンCSSを自分でカスタマイズする際などに参考にするといいかもしれません。


イベント