Advertisement

 

 

Webサイトにおいてよく利用されているデザインパーツのひとつ、ボタンデザイン。

たとえば送信ボタンや、アプリ購入用ボタン、資料請求などのお問い合わせボタンなど用途やデザインもさまざまです。

 

海外デザインブログTripwire Magazineで、Photoshopで編集可能なボタンデザイン用PSD素材を50個まとめたエントリー「50+ Incredible Sets of High Quality Free Website Buttons」が公開されていたので、今回はこちらをベースに個人的にダウンロードしておきたいボタン用PSD素材を一緒にまとめています。

 

また後半部分では、画像を使わずCSS3のみでレイアウト可能なボタンデザインも一緒にまとめています。それぞれデモページ、ソースコードも公開されているので比較的簡単に実装することができますよ。

 

 

詳細は以下から。

 

 

思わずクリックしたくなる高品質なボタンデザイン素材まとめ

 

3D Buttons

光沢感のあるピクセル単位でデザインされたボタン用PSD素材、通常時、ホバー、アクティブ時の3タイプが用意されいてます。

 

 

Chunky 3D Web Buttons

使いやすい色使いでデザインされた全10色のボタンデザインで、それぞれ3タイプずつ用意されています。

 

 

Instagram Sign-in Buttons

レトロカラーでデザインされたかわいいボタンデザイン2種類セット、テキストを変更するだけでオリジナルデザインとして利用することも可能。

 

 

Toggle Switch Variations

メタリック調のつまみ部分が印象的なトグルボタンデザイン、緑、赤の2種類が用意されています。

 

 

Download Buttons PSD Pack

つやつやとしたグロス感を表現したボタンデザイン全4種類で、通常時、ホバー時の2タイプずつが用意されています。

 

 

Dropdown & Standard Button Set with All States

シンプルなドロップダウンメニューと一緒に3種類のカラーリングでデザインされたボタンデザインを収録。

 

 

Buttons

やさしい印象のパステルカラーを利用したボタンデザイン3タイプをデザインした素材ファイル。

 

 

Request Buttons

思わずクリックしたくなるようなインパクトのあるカラーリングでデザインされたボタン素材。

 

 

Retro Style Buttons

レトロな色使いとテクスチャ素材を使って作成された3種類のボタンデザイン素材。

 

 

Register for Free Buttons

カラフルなチェック柄をモチーフにデザインされたボタン用PSD素材ファイルセット。

 

 

Red Pattern & Button

利用しているユーザーの数も増え続けているfacebookのロゴをあしらったボタン素材、もちろんロゴ、テキストは変更可能となっています。

 

 

Web 2.0 Graphics – Free .PSD

Webサイトで利用するであろうあらゆるボタンデザインをセットにした素材ファイルで、カラフルな色使いはお好みに応じて利用することができそうです。

 

 

Glossy Web Buttons

全9色のボタンデザインをセットにしており、拡大縮小しても画質の劣化しないベクターシェイプを利用したPSD素材。

 

 

Download The Souce Files Button

ファイルなどのダウンロード用ボタンとしてデザインされたレタープレスデザイン素材。

 

 

Social Sign in Buttons

淡いグラデーションとノイズテクスチャを組み合わせてデザインされた質感の高いソーシャルメディア関連のボタンデザイン。

 

 

Vibrant Twitter Follow Buttons

4色のカラフルなボタンデザインをまとめたPSD素材ファイルのひとつ。

 

 

Colorful Buttons

こちらもカラフルなカラーリングが魅力的なボタン素材で、それぞれ3タイプずつ用意された立体的なデザイン。

 

 

Mini Tooptips

コメント数や新着ニュースなどに表示するツールチップ用ボタンデザインで、各5色用意しています。

 

 

Menu Notification Badges

こちらもボタンと一緒に使いたいツールチップタイプのボタン素材デザイン。

 

 

Music Control Buttons

動画や音楽ファイルなどのプレイヤーデザインをモチーフにデザインされたメタリックのボタン素材で、各4色が収録されています。

 

 

ON OFF Buttons

家電製品のスイッチを忠実で再現したPhotoshop用PSD素材。

 

 

Web Elements PSD & PNG

光沢感&立体感たっぷりでデザインされたリボンやステッカー、ボタン素材をセットにしたPSDファイル。

 

 

31 Free Buttons PSD File

31種類ものボタンデザインをまとめたお得なPhotoshop用PSD素材ファイル。

 

 

Clean E-Commerce Web Buttons

ショッピングサイトを作成するときに利用したいショッピングカートをデザインしたボタン素材。

 

 

Bright 3D Buttons

落ち着いた色使いを使い、3Dエフェクトを加えたボタンデザイン素材3種類。

 

 

Big Green Button

影などを追加することで立体的なデザインで作成されたボタンデザイン。

 

 

画像を使わないCSS3のみでデザインされたボタンまとめ

 

画像素材を利用せずにCSS3などの新しいテクニックを利用してボタンデザインを表現することもできるようになっています。

ソースコードなども無料で公開されているので、HTMLを触ることができる方は比較的導入しやすいのではないでしょうか。

ブラウザによってはきちんと表示されない場合もあるので注意が必要ですが、今後のWebサイト制作に利用してみてはいかがでしょう。

 

CSS3 Buttons

15種類のそれぞれデザインの異なるボタンデザインが公開されており、ソースコードもこちらからダウンロード可能となっています。

デモページはこちら

 

 

BonBon Sweet CSS3 Buttons

キャンディーのような光沢感までCSS3を使ってデザインされた立体的なボタンデザイン、ソースコードのダウンロードはこちらからどうぞ。

デモページはこちら

 

 

Super Awesome Buttons with CSS3 and RBGA

CSS3でデザインされたボタンのbox-shadowをRGBAで指定することで透明化することができるボタンデザイン用コード。すべてのソースコードはこちらからどうぞ。

デモページはこちら

 

 

Pretty CSS3 Buttons

各6色、3サイズに対応したカラフルなCSS3ボタン素材セット、ソースコードのダウンロードはこちらからどうぞ。

デモページはこちら

 

 

Zardi – Pack of CSS3 only Buttons

カラフルな7色のデザインが魅力的で、ボタン用のcssファイルを読み込ませるだけで簡単に実装可能、ダウンロードはこちらからどうぞ。

デモページはこちら

 

 

GitHub-Style CSS3 Buttons

こちらもダウンロード可能なcssファイルを読み込ませるだけで実装可能なCSS3ボタンで、ミニアイコンなどにも対応。ダウンロードはこちらからどうぞ。

デモページはこちら

 

 

10 Awesome CSS3 Buttons

10種類の色使いがゆたかなボタンデザイン用コードを紹介しており、ダウンロードはこちらからどうぞ。

デモページはこちら

 

 

CSS3 Animated Bubble Buttons

ボタンの背景にレイアウトされた泡がアニメーションする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]