定番ボタンからアニメーションまで!ボタン素材サイト14選+α


定番ボタンからアニメーションまで!ボタン素材サイト14選+α

webサイトの目的を達成するために「ボタン」の存在は非常に大きな意味をもっています。商用サイトであれば「購入」ボタンをクリックして欲しいですし、SNSサイトであれば「ユーザー登録」「投稿」などユーザーの利便性が求められます。今回は、そんなボタン・ストレスから少しでも開放されるように定番のボタン素材提供サイトからブラウザ上でボタンを作成できるサイト、それから今年トレンドのアニメーション・ボタンをマネできるサイトまで幅広くご紹介します。

目次
  1. web定番ボタンからトレンドボタンまでの素材サイト集
  2. オンライン・ボタン作成「Da Button Factory」
  3. オンライン・ボタン作成「FREE CALL-TO-ACTION BUTTON GENERATOR」
  4. オンライン・ボタン作成「As Button Generator」
  5. オンライン・ボタン作成「GRSites」
  6. オンライン・ボタン作成/円形「Wacky Buttons」
  7. オンライン・ボタン作成/円形「The Button Designer」
  8. オンライン・ボタン作成/CSS「CSS Button Generator」
  9. オンライン・ボタン作成/CSS「Online Button Maker」
  10. オンライン・ボタン作成/CSS「Button Generator」
  11. ボタン素材ダウンロード「ShanaBrian」
  12. ボタン素材ダウンロード「取り放題.com」
  13. ボタン素材ダウンロード「blue-green」
  14. ボタン素材ダウンロード「OCEANICS.NET」
  15. アニメーションボタンのサンプルサイト
  16. その他ボタン関係の便利サイト
  17. まとめ

web定番ボタンからトレンドボタンまでの素材サイト集

オンライン・ボタン作成「Da Button Factory」

da button factoryDaButtonFactory

ダウンロードのファイル形式/.png .gif .jpg .ico
** CSS コードの表示/可  ボタンアニメーション/不可**

機能がシンプルで使いやすい。とりあえずのボタン作成ならこちらで十分です。

オンライン・ボタン作成「FREE CALL-TO-ACTION BUTTON GENERATOR」

FREE CALL-TO-ACTION BUTTON GENERATORFREE CALL-TO-ACTION BUTTON GENERATOR

ダウンロードのファイル形式/.png

** CSS コードの表示/可  ボタンアニメーション/不可**

ボタン内に矢印や $ マークなどのアイコンを追記することが可能です。

アイコン・サンプルコード

オンライン・ボタン作成「As Button Generator」

As Button GeneratorAs Button Generator

ダウンロードのファイル形式/.png  CSS コードの表示/不可
** ボタンアニメーション/不可**

日本語表示のサイトで安心してボタン作成を行うことができます。用意されている機能もシンプルで扱いやすくなっています

オンライン・ボタン作成「GRSites」

GRSitesGRSites

ダウンロードのファイル形式/.png .gif .jpg .bmp .tiff
** CSS コードの表示/不可  ボタンアニメーション/不可**

ノーマルボタン、背景画像挿入型ボタン、ファンシーボタン、矢印ボタンの4種を作成できます。標準のフォントでは日本語表示できなく、日本語フォントをアップロードして使う必要があります。

日本語のフォントサンプル

オンライン・ボタン作成/円形「Wacky Buttons」

Wacky ButtonsWacky Buttons

円形状のボタン作成に特化したサイトになります。pngファイルは、プレビュー画面から右クリックで画像の保存を指定すると、png形式で保存可能となっています。

ダウンロードのファイル形式/.png .wb3 CSS コードの表示/不可
ボタンアニメーション/不可

ノーマルボタン、背景画像挿入型ボタン、ファンシーボタン、矢印ボタンの4種を作成できます。標準のフォントでは日本語表示できなく、日本語フォントをアップロードして使う必要があります。

オンライン・ボタン作成/円形「The Button Designer」

The Button DesignerTheButtonDesigner

ダウンロードのファイル形式/.jpg
** CSS コードの表示/不可  ボタンアニメーション/不可**

円形状のボタン作成に特化したサイトで、ユーザー登録することによって画像の作成、管理が可能となります。通常は作成したボタンを印刷するのみですが、特定のアドレスにアクセスすると jpg ファイルを開くことができます。

http://www.button-designer.com/ButtonDesigner/buttons/ ユーザー名 / ファイル名 .jpg

後は画像を右クリックして、画像を保存すると jpg ファイルをゲットできます。

オンライン・ボタン作成/CSS「CSS Button Generator」

CSS Button GeneratorCSS Button Generator

ダウンロードのファイル形式/ダウンロード無
** CSS コードの表示/可  ボタンアニメーション/可**

ブラウザ上でボタンのレイアウト、文字を調整し、表示される CSS コードをコピーして、自分の CSS ファイルに貼り付けるタイプのボタン作成サイトになります。予めアニメーションなども設定されているので、初心者の方でも比較的簡単に操作できます。

オンライン・ボタン作成/CSS「Online Button Maker」

Online Button MakerOnlineButtonMaker

ダウンロードのファイル形式/ダウンロード無
** CSS コードの表示/可  ボタンアニメーション/可**

ボタンアニメーションをマウスオンとクリックした時の2動作にわたって指定できます。細部まで設定できるようになっている半面、初心者には少し使いにくいかもしれません。

オンライン・ボタン作成/CSS「Button Generator」

Button GeneratorButtonGenerator

ダウンロードのファイル形式/ダウンロード無
** CSS コードの表示/可  ボタンアニメーション/不可**

機能がシンプルで、直感的にボタンを作成することができます。ただし、画面上に広告がいくつか表示されているので、目障りに感じるかもしれません。

ボタン素材ダウンロード「ShanaBrian」

ShanaBrianShanaBrian

ダウンロードのファイル形式/.png
** 商用/OK  2次加工/OK**

典型的なボタン素材の無料ダウンロードサイトになります。お好みのサイズやカラーからボタンを選択することができます。文字入り版と無字版がありますので、用途に応じてダウンロードを使い分けることができます。文字なしボタンに文字を追記する場合はオンラインエディターやペイントソフトが有効と考えられます。

ボタン素材ダウンロード「取り放題.com」

取り放題取り放題.com

ダウンロードのファイル形式/.png
** 商用/OK  2次加工/OK**

商用向けのボタン素材提供サイトになります。

ボタン素材ダウンロード「blue-green」

blue-greenblue-green

ダウンロードのファイル形式/.gif
** 商用/OK  2次加工/OK**

キュートなボタンを無料でダウンロードできるサイトになります。

ボタン素材ダウンロード「OCEANICS.NET」

ボタン素材OCEANICS.NET

ダウンロードのファイル形式/.gif
** 商用/OK  2次加工/OK**

6,000 種類以上の豊富なストック量を誇るボタン素材の提供サイトになります。

アニメーションボタンのサンプルサイト

アニメーションボタンのサンプルを紹介しているサイトをご紹介します。

ボタン枠にアニメーション

animated-css-button

cssdesk.com

クリックで紙飛行機が飛んでいくアニメーション

send-button

CODEPEN

ダウンロードの進捗をアニメーションするボタン

downloading

CODEPEN

電気のスイッチ風ボタン

スイッチ

JSFIDDLE

スマホ管理ボタン風のボタン

スマホの管理ボタン風

CODEPEN

マウスオンで枠が回転するボタン

回転ボタン

CODEPEN

アニメーション・ボタンのコード集「Hover」

hoverHover

アニメーション・ボタンのコード集「codrops」

codropscodorops

その他ボタン関係の便利サイト

webデザインにおいてボタン・レイアウトを検討する時に役立つツールをいくつかご紹介します。

アニメーションボタンのGIFファイル作成なら「GIFMaker.me」

output_u7uigg

GIFMaker.me

オンライン・イラストツールイラストレーター風

yuidraw

YouiDraw

オンライン・イラストツールフォトショップ風

pixlr画像

pixlr

オンラインCSSエディター「CODEPEN」

codepen

CODEPEN

オンラインCSSエディター「w3schools.com」

w3schools

w3schools.com

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

いかがでしたでしょうか?webデザインとマッチしそうなボタンは見つかりそうでしょうか?今年のトレンドは「ゴーストボタン」に「アニメ―ション」という組み合わせです。ボタン素材のダウンロードではこうしたトレンド採用は難しいですが、CSSでのボタン装飾なら簡単にトレンド・ボタンをwebデザインに取り入れることができます。WebデザインでCSSが慣れていない方でも、とりあえずサンプルコードをコピペしてトライしてみるといいと思います。ちなみにゴーストボタンの作成は、ボタンレイアウトのbackground部分を消しちゃえばゴースト・ボタンになりますよ。

ghost-button


関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp