Top >  ボタン

ボタン

ボタン一覧

無料素材≫ボタン:スリムボタン・ライトカラー20×140px

slim_light20_or.gif

スリムボタン・ライトカラーのサイズ違いです。高さは20ピクセル、巾は140ピクセルになっています。ロールオーバーで色を変える、1~2ピクセル下、または右下に動かすなど、工夫してご利用ください。

全色をひとつの圧縮ファイルにまとめていますので、下のサンプル画像またはテキストリンクをクリックして、ファイルをダウンロードの上解凍してご利用ください。

無料素材≫ボタン:スリム・ライトカラー20×160

スリムボタン・ライトカラー

スリムタイプのライトカラー(パステルカラー)ボタン、サイズ違いでH20×W160ピクセルとなっています。 ロールオーバーで色を変化させる、少し動かすなど、お好みに合わせてご利用ください。Wを少し広くしましたので、文字数の多いメニューにも対応できます。外周はアンチエイリアスなし、透過処理をしていますので背景色を選びません。

20色のデータをひとつのファイルに圧縮しています。下のサンプルまたはテキストリンクをクリックして保存、解凍してお使いください。

無料素材≫ボタン:スリム・ライトカラー16

スリムボタン・ライトカラー16px

高さ16ピクセル×巾140ピクセルのスリムなボタンベースです。ライトカラーなどといいながら黒が混じってたりしますがご容赦ください。
ゼリービーンズのような長円形で少し膨らんだ感じを持たせています。ここにはなぜ四角いボタンベースが無いの?とお思いの方もおられるかもしれませんが、四角のべた色のボタンはcssだけでできますので、画像ファイルを作る必要が無いからです。

外形のアンチエイリアスはオフ、透過処理をしていますので背景色の上でもご利用いただけます。
20色のファイルをまとめて圧縮していますので、ダウンロードの上解凍してご利用ください。圧縮ファイルはLZHです。

無料素材≫ボタン:タイプ10 吊り下げメタルプレート

ちょっと変わったメタルプレート吊り下げタイプをご紹介します。ステンレスのノブにアルミのプレートが吊り下げられているイメージです。ボタンは左右に動きますが、「動く」ということが形として表現されているところがわたしの気に入っている点です。

トップの飾りノブ部分がW180×H144ピクセル、以下すべてのファイルはW180ピクセルにしています。ボタンプレート部分がH36ピクセル(ただし、絵柄上のプレートの大きさは160×26ピクセル)ベースとして使う部分が(repeat y してください)18ピクセル、下端の部分が14ピクセルとなっています。

ボタンを使わずに単なる吊り下げプレートとしても使えます。この場合、右側に白いスペースができますのでご注意ください。

ダウンロードファイルにはそれぞれ5つの画像ファイルが圧縮されています。

無料素材≫ボタン:タイプ9 メタリック風

btn09_stn_r.gif

無料ボタン:タイプ9は、メタリックなプレートケース風のボタンベースを作ってみました。LEDを組み込んだようなタイプとプレーンなものがあります。LEDはオレンジ、赤、グリーン、流行のブルー、そして消灯している雰囲気のOFFタイプがあります。

サイズは外々で180×30ピクセル、内側のプレート部分サイズで150×22ピクセル、左の部分は25ピクセルの幅があります。

イメージとしてはステンレス、アルミ、銅、金ですがそう見えますかどうか?金は難しいですね。真鍮にしか見えないかも。

無料素材≫ボタン:タイプ8

%EF%BD%82%EF%BD%94%EF%BD%8E08_cl.gif
CLICK、お申し込み・・・などのボタン。タイプ5で円形のタイプをご紹介しましたが、今回は横長の楕円にしました。色は赤のみです。 サイズは364ピクセル×80ピクセル(ボケ足含む)です。 「CLICK」「今すぐ登録!」「今すぐクリック!」「資料請求」「ダウンロード」「お申し込み」の6種の文字入りと無地のベースをパックにしました。ダウンロードいただくファイルはLZH形式の圧縮ファイルです。下のサンプル画像またはリンクをクリックしてください。

無料素材》ボタン:タイプ7

これもよくあるパターンです。一部紙(?)の裏が見えているというやつです。 サイズは130ピクセル×22ピクセル、ロールオーバー用に裏が赤いのと二通りにしました。

色は、白、ライトグレー、ダークグレー、黒、インディゴ、ダークレッド(いずれも線色)の6色、線と赤以外は透過していますのでバック色の上でもお使いいただけます。 したのサンプル画像では白とライトグレーに黒バックをしいていますが実際のデータは線色と赤のみです。

いつもの通りダウンロードしていただくファイルはLZH圧縮ファイルですので解凍ソフトをご用意ください。

無料ボタン:タイプ6

無料ボタン:少し懐かしい透明カプセル、あるいはゼリービーンズタイプです。色の変化に動きを加えました。ボケ足の分画像が少し大きくなっていて、画像サイズは145ピクセル×29ピクセルですが、長円形のサイズは130ピクセル×19ピクセルとなっています。
透過処理はしておりますがボケ足があるため白バック専用です。

下段のロールオーバー用の画像では、カプセルが2ピクセル下に下がります。このとき影が少し濃くなるのがわたしの芸です。そんなことよりも、文字も2ピクセル下げることを忘れないでくださいね。

無料ボタン:タイプ5

前回まではメニュー用のボタンベースでしたが、今回の無料ボタン:タイプ5は本文中で使うタイプのものにしてみました。

ビジネス用のサイトでよく見られるやつですが、今すぐクリック!なんていうタイプのやつです。大きさは少し大きめで影を含めて116ピクセル×116ピクセルです。無地と文字入りを作りました。文字は「CLICK」「今すぐ登録!」「今すぐクリック!」資料請求」「ダウンロード」「お申込み」の6種です。

無料ボタン:タイプ1-4

今回の無料ボタンは無料ボタン:タイプ1-3のライトカラーバージョンです。カラーパターンについては壁紙の項目をご覧ください。基本的にこの36色をベースにしてゆきます。


無彩色を除いて上段の色と下段の色は同じ色相で、明度と彩度だけが変わるように選びました。その結果、セーフティカラーから外れて色ずれが起こるという失敗もしたのですが・・・。


お持ち帰りは例によって一括ダウンロードでお願いいたします。ファイルは「LZH」ファイルですので解凍ソフトをご用意ください。


無料ボタン:タイプ1-3

無料ボタンの第3弾は、無料ボタン第1弾と同じ形のものにボタンベースに色をのせました。とりあえず濃色で18色。黒はインナーシャドウを白でつけましたが、他の色の影色はすべて黒です。


サイズは今までのものと同じでW142ピクセル×H26ピクセルです。


ダウンロードはまた一括圧縮ファイルとなります。下のサンプル画像をクリックして保存してください。

無料ボタン:タイプ1-2

当無料素材サイトの無料ボタン第2弾は、第1弾のバリエーションです。このサイトではインナーシャドウの色をマウスオーバーのときに変えるようにしていますが、1-2はボタンベースの白を少しだけ陰らせてみました。あまり暗くなると見苦しく感じるように思いましたので、色は #eeeeee のごく薄いグレーにしました。変化する部分ですので、マウスオーバー時のわずかな濃度変化でも十分に認識していただけると思います。タイプ1と組み合わせてご利用ください。

無料ボタン:タイプ1

当無料素材サイトの無料ボタン第1弾は、このサイトで使っているメニューボタンのイメージのバリエーションです。以前は文字入りのを作っていたのですが、ボタン操作をJavaScriptからcssに切り替えるにあたってベースだけのものにすることにしました。HTMLベースでサイトを作るときも、メニューはテキストリンクにしたほうがSEO的にもいいということですしね。それとページの操作性を考えるなら視覚的にリンクだとわかるボタンは捨てがたいものがありますものね。