Webサイトにおいてよく利用されているデザインパーツのひとつ、ボタンデザイン。
たとえば送信ボタンや、アプリ購入用ボタン、資料請求などのお問い合わせボタンなど用途やデザインもさまざまです。
海外デザインブログTripwire Magazineで、Photoshopで編集可能なボタンデザイン用PSD素材を５０個まとめたエントリー「50+ Incredible Sets of High Quality Free Website Buttons」が公開されていたので、今回はこちらをベースに個人的にダウンロードしておきたいボタン用PSD素材を一緒にまとめています。
また後半部分では、画像を使わずCSS3のみでレイアウト可能なボタンデザインも一緒にまとめています。それぞれデモページ、ソースコードも公開されているので比較的簡単に実装することができますよ。
詳細は以下から。
思わずクリックしたくなる高品質なボタンデザイン素材まとめ
光沢感のあるピクセル単位でデザインされたボタン用PSD素材、通常時、ホバー、アクティブ時の3タイプが用意されいてます。
使いやすい色使いでデザインされた全10色のボタンデザインで、それぞれ3タイプずつ用意されています。
レトロカラーでデザインされたかわいいボタンデザイン2種類セット、テキストを変更するだけでオリジナルデザインとして利用することも可能。
メタリック調のつまみ部分が印象的なトグルボタンデザイン、緑、赤の2種類が用意されています。
つやつやとしたグロス感を表現したボタンデザイン全4種類で、通常時、ホバー時の2タイプずつが用意されています。
Dropdown & Standard Button Set with All States
シンプルなドロップダウンメニューと一緒に3種類のカラーリングでデザインされたボタンデザインを収録。
やさしい印象のパステルカラーを利用したボタンデザイン3タイプをデザインした素材ファイル。
思わずクリックしたくなるようなインパクトのあるカラーリングでデザインされたボタン素材。
レトロな色使いとテクスチャ素材を使って作成された3種類のボタンデザイン素材。
カラフルなチェック柄をモチーフにデザインされたボタン用PSD素材ファイルセット。
利用しているユーザーの数も増え続けているfacebookのロゴをあしらったボタン素材、もちろんロゴ、テキストは変更可能となっています。
Webサイトで利用するであろうあらゆるボタンデザインをセットにした素材ファイルで、カラフルな色使いはお好みに応じて利用することができそうです。
全9色のボタンデザインをセットにしており、拡大縮小しても画質の劣化しないベクターシェイプを利用したPSD素材。
Download The Souce Files Button
ファイルなどのダウンロード用ボタンとしてデザインされたレタープレスデザイン素材。
淡いグラデーションとノイズテクスチャを組み合わせてデザインされた質感の高いソーシャルメディア関連のボタンデザイン。
Vibrant Twitter Follow Buttons
4色のカラフルなボタンデザインをまとめたPSD素材ファイルのひとつ。
こちらもカラフルなカラーリングが魅力的なボタン素材で、それぞれ3タイプずつ用意された立体的なデザイン。
コメント数や新着ニュースなどに表示するツールチップ用ボタンデザインで、各5色用意しています。
こちらもボタンと一緒に使いたいツールチップタイプのボタン素材デザイン。
動画や音楽ファイルなどのプレイヤーデザインをモチーフにデザインされたメタリックのボタン素材で、各4色が収録されています。
家電製品のスイッチを忠実で再現したPhotoshop用PSD素材。
光沢感&立体感たっぷりでデザインされたリボンやステッカー、ボタン素材をセットにしたPSDファイル。
31種類ものボタンデザインをまとめたお得なPhotoshop用PSD素材ファイル。
ショッピングサイトを作成するときに利用したいショッピングカートをデザインしたボタン素材。
落ち着いた色使いを使い、3Dエフェクトを加えたボタンデザイン素材3種類。
影などを追加することで立体的なデザインで作成されたボタンデザイン。
画像を使わないCSS3のみでデザインされたボタンまとめ
画像素材を利用せずにCSS3などの新しいテクニックを利用してボタンデザインを表現することもできるようになっています。
ソースコードなども無料で公開されているので、HTMLを触ることができる方は比較的導入しやすいのではないでしょうか。
ブラウザによってはきちんと表示されない場合もあるので注意が必要ですが、今後のWebサイト制作に利用してみてはいかがでしょう。
15種類のそれぞれデザインの異なるボタンデザインが公開されており、ソースコードもこちらからダウンロード可能となっています。
キャンディーのような光沢感までCSS3を使ってデザインされた立体的なボタンデザイン、ソースコードのダウンロードはこちらからどうぞ。
Super Awesome Buttons with CSS3 and RBGA
CSS3でデザインされたボタンのbox-shadowをRGBAで指定することで透明化することができるボタンデザイン用コード。すべてのソースコードはこちらからどうぞ。
各6色、3サイズに対応したカラフルなCSS3ボタン素材セット、ソースコードのダウンロードはこちらからどうぞ。
Zardi – Pack of CSS3 only Buttons
カラフルな7色のデザインが魅力的で、ボタン用のcssファイルを読み込ませるだけで簡単に実装可能、ダウンロードはこちらからどうぞ。
こちらもダウンロード可能なcssファイルを読み込ませるだけで実装可能なCSS3ボタンで、ミニアイコンなどにも対応。ダウンロードはこちらからどうぞ。
10種類の色使いがゆたかなボタンデザイン用コードを紹介しており、ダウンロードはこちらからどうぞ。
ボタンの背景にレイアウトされた泡がアニメーションするCSS3ボタン、デモページを見ていただくと分かりやすいかと思います。ダウンロードはこちらからどうぞ。
[参照元 : 50+ Incredible Sets of High Quality Free Website Buttons – Tripwire Magazine]
[参照元 : CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions – WebResources Depot]
[参照元 : Designing CSS Buttons: Techniques and Resources – Smashing Magazine]
