Tyto Style

web creations and consulting.

ボタン・その他の素材

ボタン用に作成した素材です。
かつて時間をかけてていねいに作っていたものですが、今ではCSSだけで再現できてしまうものも少なくありませんね。 比較的に人気のある「めくれたページ」を表現するAI素材も以下でダウンロードできます。

Web素材のトップに戻る

利用規約

  • 公開している素材は法人・個人を問わずすべて無料でご利用いただけます。
  • 加工をしたり、商用で利用しても問題ありません。
  • 利用に際し、報告もとくに必要ありません。

● 禁止事項

  • 素材への直接リンクはしないでください。
  • 著作権を偽らないでください。
  • 違法サイトでの利用はご遠慮ください。
  • 素材を販売したり、再配布したりしないでください。
  • 素材ではない画像は無断で利用しないください。

● 免責

  • 当サイトのウェブ素材及びデスクトップ素材を用いることによって生じるいかなる損失に関しても管理人は責任を負いません。
  • また当サイトのウェブ素材及びデスクトップ素材の利用者がいかなる活動を行うものであっても当サイト及び当サイト管理人がそれらの活動等に責任を負うものではありません。
  • 公開されている素材は事前に断りなく移動、修正、公開停止などの措置をとる場合があります。
  • 規約は断りなく変更になる場合があります。ご了承ください。

サークルに入った矢印のボタン素材

サークルに入った矢印のボタン素材

一見意味不明なタイトルですが、矢印のボタン素材です。
ギャラリーを色々見てて、作ってみたくなったので形にしてみました。
Pngファイルで、大・中・小のアイコンをそれぞれ15種類×2色ずつ作成しています。全部で360個ずらーっと並んでいるので、少し重いです。ダウンロードは下記よりどうぞ。

素材を表示する

  • ボタン素材(大)
  • ボタン素材(中)

素材を隠す

14色のボタン素材

カラー・ボタン

今回は色つきのボタンです。とりたててテーマがあるわけではなく、思いつくままにさくっと作ってみました。
一応大中小の3サイズを、14色ずつ作成しました。

素材を表示する

  • ボタン(大)01 252*64px
  • ボタン(大)02 252*64px
  • ボタン(大)03 252*64px
  • ボタン(大)04 252*64px
  • ボタン(大)05 252*64px
  • ボタン(大)06 252*64px
  • ボタン(大)07 252*64px
  • ボタン(大)08 252*64px
  • ボタン(大)09 252*64px
  • ボタン(大)10 252*64px
  • ボタン(大)11 252*64px
  • ボタン(大)12 252*64px
  • ボタン(大)13 252*64px
  • ボタン(大)14 252*64px
  • ボタン(中)01 190*48px
  • ボタン(中)02 190*48px
  • ボタン(中)03 190*48px
  • ボタン(中)04 190*48px
  • ボタン(中)05 190*48px
  • ボタン(中)06 190*48px
  • ボタン(中)07 190*48px
  • ボタン(中)08 190*48px
  • ボタン(中)09 190*48px
  • ボタン(中)10 190*48px
  • ボタン(中)11 190*48px
  • ボタン(中)12 190*48px
  • ボタン(中)13 190*48px
  • ボタン(中)14 190*48px

素材を隠す

めくれたページ素材 / Page Curls

めくれたページ素材

ページがめくれたような効果を出すための素材です。

1種類ですが、AIファイルとPNGの両方を用意しました。四角い領域の隅に配置することで、効果がでると思いますが、その時に使う四角い領域そのものにもドロップシャドウを適用したほうが雰囲気がでると思います。

ダウンロードは以下からどうぞ。

素材を表示する

  • めくれたページ素材01
  • めくれたページ素材02
  • めくれたページ素材03
  • めくれたページ素材04
  • めくれたページ素材05
  • めくれたページ素材06
  • めくれたページ素材07
  • めくれたページ素材08

素材を隠す

5色の光るボタン

5色の光るボタン

光るボタン素材です。ちょっとぼやけた感じもしますが、爽やかな印象を与えたいときなどに使えそうです。
素材はPNGとGIFそれぞれ5色を作成しています。ダウンロードは以下からどうぞ。

素材を表示する

  • 青の光るボタン
  • 緑の光るボタン
  • オレンジの光るボタン
  • ピンクの光るボタン
  • 黄色の光るボタン

素材を隠す

光沢のあるフォームボタン 01 / Glossy Form Buttons 01

光沢のあるフォームボタン

フォーム用の光沢のあるボタン素材を作成しました。
2つの異なる雰囲気で作成しました。
こちらは少し立体感と高級感が出るようにしています。

素材を表示する

  • ボタン台・青
  • ボタン台・ピンク
  • ボタン台・緑
  • ボタン台・黄
  • ボタン台・オレンジ
  • ボタン台・赤
  • ボタン台・黒
  • ボタン台・白
  • 送信ボタン・青
  • 送信ボタン・ピンク
  • 送信ボタン・緑
  • 送信ボタン・黄
  • 送信ボタン・オレンジ
  • 送信ボタン・赤
  • 送信ボタン・黒
  • 送信ボタン・白
  • 戻るボタン・青
  • 戻るボタン・ピンク
  • 戻るボタン・緑
  • 戻るボタン・黄
  • 戻るボタン・オレンジ
  • 戻るボタン・赤
  • 戻るボタン・黒
  • 戻るボタン・白
  • 次へボタン・青
  • 次へボタン・ピンク
  • 次へボタン・緑
  • 次へボタン・黄
  • 次へボタン・オレンジ
  • 次へボタン・赤
  • 次へボタン・黒
  • 次へボタン・白
  • 再入力ボタン・青
  • 再入力ボタン・ピンク
  • 再入力ボタン・緑
  • 再入力ボタン・黄
  • 再入力ボタン・オレンジ
  • 再入力ボタン・赤
  • 再入力ボタン・黒
  • 再入力ボタン・白
  • 確認ボタン・青
  • 確認ボタン・ピンク
  • 確認ボタン・緑
  • 確認ボタン・黄
  • 確認ボタン・オレンジ
  • 確認ボタン・赤
  • 確認ボタン・黒
  • 確認ボタン・白
  • リセットボタン・青
  • リセットボタン・ピンク
  • リセットボタン・緑
  • リセットボタン・黄
  • リセットボタン・オレンジ
  • リセットボタン・赤
  • リセットボタン・黒
  • リセットボタン・白

素材を隠す

光沢のあるフォームボタン 02 / Glossy Form Buttons 02

光沢のあるフォームボタン

こちらは少しポップな感じになるように作成しました。

素材を表示する

  • 送信ボタン・青
  • 送信ボタン・ピンク
  • 送信ボタン・緑
  • 送信ボタン・黄
  • 送信ボタン・黒
  • 送信ボタン・白
  • 送信ボタン・赤
  • 送信ボタン・オレンジ
  • 確認ボタン・青
  • 確認ボタン・ピンク
  • 確認ボタン・緑
  • 確認ボタン・黄
  • 確認ボタン・黒
  • 確認ボタン・白
  • 確認ボタン・赤
  • 確認ボタン・オレンジ
  • 次へボタン・青
  • 次へボタン・ピンク
  • 次へボタン・緑
  • 次へボタン・黄
  • 次へボタン・黒
  • 次へボタン・白
  • 次へボタン・赤
  • 次へボタン・オレンジ
  • 戻るボタン・青
  • 戻るボタン・ピンク
  • 戻るボタン・緑
  • 戻るボタン・黄
  • 戻るボタン・黒
  • 戻るボタン・白
  • 戻るボタン・赤
  • 戻るボタン・オレンジ
  • 再入力ボタン・青
  • 再入力ボタン・ピンク
  • 再入力ボタン・緑
  • 再入力ボタン・黄
  • 再入力ボタン・黒
  • 再入力ボタン・白
  • 再入力ボタン・赤
  • 再入力ボタン・オレンジ
  • リセットボタン・青
  • リセットボタン・ピンク
  • リセットボタン・緑
  • リセットボタン・黄
  • リセットボタン・黒
  • リセットボタン・白
  • リセットボタン・赤
  • リセットボタン・オレンジ

素材を隠す

シンプルなメニュー画像 / Simple Menus

シンプルなメニュー画像 Simple Menus

シンプルなデザインで作成したメニュー用画像です。
そのままメニュー用の画像として使っていただいても結構ですし、少し加工してブロック見出しとしても使うこともできると思います。6色でそれぞれ3つずつデザインしています。

素材を表示する

  • 青 下線
  • 緑 下線
  • オレンジ 下線
  • ピンク 下線
  • 赤 下線
  • 黄 下線
  • 青 ドット
  • 緑 ドット
  • オレンジ ドット
  • ピンク ドット
  • 赤 ドット
  • 黄 ドット
  • 青 クロス
  • 緑 クロス
  • オレンジ クロス
  • ピンク クロス
  • 赤 クロス
  • 黄 クロス

素材を隠す

ハーフトーンのメニュー素材 / Harftone Bars

ハーフトーンのメニュー素材

ハーフトーンを入れた素材です。8色用意しました。メニューやボタンにどうぞ。
白背景に合わせたGif画像で作成していますので、違う背景色の場合は加工してお使いください。

素材を表示する

  • ハーフトーンのメニュー素材、赤
  • ハーフトーンのメニュー素材、紫
  • ハーフトーンのメニュー素材、ピンク
  • ハーフトーンのメニュー素材、緑
  • ハーフトーンのメニュー素材、青
  • ハーフトーンのメニュー素材、黄
  • ハーフトーンのメニュー素材、白
  • ハーフトーンのメニュー素材、黒

素材を隠す

フォーム用ボタン / Submit, Post and Search Buttons

検索 送信

フォーム用のボタンです。検索ボタン・送信ボタン・投稿ボタンを9色分用意しました。

素材を表示する

  • 検索
  • 検索
  • 検索
  • 検索
  • 検索
  • 検索
  • 検索
  • 検索
  • 送信
  • 送信
  • 送信
  • 送信
  • 送信
  • 送信
  • 送信
  • 送信
  • 投稿
  • 投稿
  • 投稿
  • 投稿
  • 投稿
  • 投稿
  • 投稿
  • 投稿
  • サーチ
  • サーチ
  • サーチ
  • サーチ
  • サーチ
  • サーチ
  • サーチ
  • サーチ
  • サブミット
  • サブミット
  • サブミット
  • サブミット
  • サブミット
  • サブミット
  • サブミット
  • サブミット
  • ポスト
  • ポスト
  • ポスト
  • ポスト
  • ポスト
  • ポスト
  • ポスト
  • ポスト
  • ボタン
  • ボタン
  • ボタン
  • ポスト
  • ボタン
  • ボタン
  • ボタン
  • ボタン

素材を隠す

お望みのアイコンが見つからなかったひとにオススメ!

バナープラスは豊富な素材から、ホームページ用の画像や広告用のバナーを簡単に作れるツール
Photoshopに挫折した経験があるひとにこそオススメしたい便利ソフトです。

Web素材のトップに戻る