もう悩まない!コピペで簡単CSSボタンデザインと便利なジェネレータ8選



もう悩まない!コピペで簡単CSSボタンデザインと便利なジェネレータ8選
目次
  1. CSSで作るボタンデザイン
  2. フラットデザイン向けのアニメ付きボタン
  3. ハイコントラストが美しいSNSボタン
  4. 立体的でカラフルなアニメ付きボタン
  5. Windows 8風のフラットデザインボタン
  6. 簡単にボタンが作れる便利なジェネレータ
  7. Button Maker
  8. CSS Drive CSS3 Button Generator
  9. CSS Button Generator
  10. 2.5dBUTTON
  11. まとめ

ホームページ制作に欠かせない素材、ボタン。少し前までは画像を使って実装する事も多かったこのボタンですが、スマートフォン等の普及に伴い最近はCSSで実装するのが主流になってきましたね。しかし、シンプルだからこそデザインが難しいのがボタンだったりします。そこで今回は、コピペで使える実用的なCSSボタンサンプルとスタイリッシュなボタンが簡単に作れる優秀なジェネレータをご紹介しますよ!

CSSで作るボタンデザイン

フラットデザイン向けのアニメ付きボタン

post-4462_12

こちらはフラットデザイン向けのお洒落なデザインのボタンです。アイコンをフォントにしているので画像を使わない手軽さと、CSSを駆使したスタイリッシュなデザインがいいですね。ソースやフォントはCreative Button Stylesで配布されているので、コピペで使える手軽さも嬉しいところです。他にもカーソルを当てると矢印が飛び出すアニメ付きボタンやオンカーソルで3D風に動くボタンのソースも配布されています。post-4462_12apost-4462_12c

・Creative Button Styles | http://tympanus.net/codrops/2013/06/13/creative-button-styles/

ハイコントラストが美しいSNSボタン

post-4462_13c

黒とカラフルな色の掛けあわせが美しいこちらはSNS用のボタンサンプル。ページ先ではソースの内容とデモ、ソースのダウンロードがあるのでこちらもコピペで使えます。ハッキリとしたコントラストがモダンな感じで素敵ですね!こちらもフラットデザインと相性が良さそうです。
・Dzyngiri | http://www.dzyngiri.com/buttons-with-icons/

立体的でカラフルなアニメ付きボタン

ぷっくりとしたビジュアルとカラフルな配色が可愛いこちらは、オンカーソル時に僅かにグラデーションのかかった状態になるアニメまで可愛らしいボタン。たくさんの色が用意されていて、使い勝手が良さそうです。また、立体型のボタン以外にも平面バージョンのボタンや角が丸くなったボタンのソースが配布されているのも嬉しいですね!post-4462_14

post-4462_14a

・CSS3 PICTOGRAM BUTTON | http://webstuffshare.com/demo/ButtonPictogram/index.html

Windows 8風のフラットデザインボタン

post-4462_15

こちらはWindows 8風のボタンの数々。少し落ち着いた色合いのボタンになっていて、形も長方形と正方形の2種類。こういったボタンも面白いですね。

・CSS Windows 8 Metro Buttons |
http://ui-cloud.com/css-windows-8-metro-buttons/

簡単にボタンが作れる便利なジェネレータ

次はグラフィカルなインターフェイスで直感的にボタンが作れる便利なジェネレータの紹介です。CSSを設定しながらデザインを考えてもいいですが、完成形を目で確認したり値をいじりながら作るほうが作業が捗りそうですよね。どのジェネレータも簡単にCSSボタンが作れるのでおすすめです。

Button Maker

直感的にCSSボタンが作れるのはButton Maker。一番上のスライダーがpadding、真ん中がボタン全体の大きさ、一番下が角丸を調節できるようになっています。こちらはグラデーションの具合が細かく設定できるようになっていて、フォントも3種類から選べるのが嬉しいところ。ボタン部分をクリックすると生成されたCSSがダイアログ形式で表示されます。

post-4462_8

・Button Maker |
http://css-tricks.com/examples/ButtonMaker/

CSS Drive CSS3 Button Generator

グラデーションの具合や角丸、ボーダー、テキストの内容などが細かく設定できるのがこちらのCSS Drive CSS3 Button Generator。ドロップシャドウなどの効果や変形まで詳しく設定する事ができる他、オンカーソル時の動き(a:hover)の内容など細かく決められるのはすごいですね!post-4462_9

・CSS Drive CSS3 Button Generator | http://www.cssdrive.com/css3button/

CSS Button Generator

基本のカラーテーマがあらかじめ用意されているのを編集できるのが便利なCSS Button Generatorは、サイズやグラデーションの具合はもちろんフォントのシャドウやボタンシャドウもスライドバーで調整できる優れもの!多すぎず少なすぎない調整項目がちょうどいい上に、基本のカラーテーマが綺麗なのでそのままコピペで使ってもOKな優良CSSボタンジェネレータです。post-4462_10

・CSS Button Generator |
http://css-button-generator.com/

2.5dBUTTON

フラットデザインのボタンを簡単に作るならこちらの2.5dBUTTON!余計なものを削ぎ落としたインターフェイスのシンプルさは、インターフェイスからしてフラットデザイン向けというべきこちらのジェネレータ。ボタンの大きさやフォントサイズや色はもちろん、アイコンを読み込んだり、読み込んだアイコンの大きさまで変えられる便利さがたまりません。post-4462_11

・2.5dBUTTON | http://noht.co.jp/2_5dbutton

フラットデザインの配色に困ったら・・・

フラットデザインにはこういったシンプルなボタンも似合うのでCSSが簡単になっていいやと思ってしまいますが、意外と悩むのが色のチョイス。フラットデザインっぽい色と言ってもどういうものかわからない…という時にはこちらのサイトがおすすめです。Palettaではフラットデザイン向けの色コードがわかる他、一つ色を選択すると相性のいい色を自動的に選んでくれるのがデキる子すぎる!

post-4462_4

↓色を選ぶと相性のいい色を選んでくれます

post-4462_4b

まとめ

さて、今回は色々なテクニックを使ったCSSボタンのデザインサンプルやCSSボタンが簡単に作れるジェネレータをご紹介しましたが、いかがでしたでしょうか?素材作りは意外と時間がかかりますよね。今回ご紹介したサンプルやジェネレータをホームページ制作に役立てて頂いて、快適なホームページ作りを行って頂ければと思います。

関連記事

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