- 更新日: 2017年03月09日
- 公開日: 2015年01月09日
もう悩まない！コピペで簡単CSSボタンデザインと便利なジェネレータ8選
ホームページ制作に欠かせない素材、ボタン。少し前までは画像を使って実装する事も多かったこのボタンですが、スマートフォン等の普及に伴い最近はCSSで実装するのが主流になってきましたね。しかし、シンプルだからこそデザインが難しいのがボタンだったりします。そこで今回は、コピペで使える実用的なCSSボタンサンプルとスタイリッシュなボタンが簡単に作れる優秀なジェネレータをご紹介しますよ！
CSSで作るボタンデザイン
フラットデザイン向けのアニメ付きボタン
こちらはフラットデザイン向けのお洒落なデザインのボタンです。アイコンをフォントにしているので画像を使わない手軽さと、CSSを駆使したスタイリッシュなデザインがいいですね。ソースやフォントはCreative Button Stylesで配布されているので、コピペで使える手軽さも嬉しいところです。他にもカーソルを当てると矢印が飛び出すアニメ付きボタンやオンカーソルで３D風に動くボタンのソースも配布されています。
・Creative Button Styles | http://tympanus.net/codrops/2013/06/13/creative-button-styles/
ハイコントラストが美しいSNSボタン
黒とカラフルな色の掛けあわせが美しいこちらはSNS用のボタンサンプル。ページ先ではソースの内容とデモ、ソースのダウンロードがあるのでこちらもコピペで使えます。ハッキリとしたコントラストがモダンな感じで素敵ですね！こちらもフラットデザインと相性が良さそうです。
・Dzyngiri |
http://www.dzyngiri.com/buttons-with-icons/
立体的でカラフルなアニメ付きボタン
ぷっくりとしたビジュアルとカラフルな配色が可愛いこちらは、オンカーソル時に僅かにグラデーションのかかった状態になるアニメまで可愛らしいボタン。たくさんの色が用意されていて、使い勝手が良さそうです。また、立体型のボタン以外にも平面バージョンのボタンや角が丸くなったボタンのソースが配布されているのも嬉しいですね！
・CSS3 PICTOGRAM BUTTON | http://webstuffshare.com/demo/ButtonPictogram/index.html
Windows 8風のフラットデザインボタン
こちらはWindows 8風のボタンの数々。少し落ち着いた色合いのボタンになっていて、形も長方形と正方形の２種類。こういったボタンも面白いですね。
・CSS Windows 8 Metro Buttons |
http://ui-cloud.com/css-windows-8-metro-buttons/
簡単にボタンが作れる便利なジェネレータ
次はグラフィカルなインターフェイスで直感的にボタンが作れる便利なジェネレータの紹介です。CSSを設定しながらデザインを考えてもいいですが、完成形を目で確認したり値をいじりながら作るほうが作業が捗りそうですよね。どのジェネレータも簡単にCSSボタンが作れるのでおすすめです。
Button Maker
直感的にCSSボタンが作れるのはButton Maker。一番上のスライダーがpadding、真ん中がボタン全体の大きさ、一番下が角丸を調節できるようになっています。こちらはグラデーションの具合が細かく設定できるようになっていて、フォントも3種類から選べるのが嬉しいところ。ボタン部分をクリックすると生成されたCSSがダイアログ形式で表示されます。
・Button Maker |
http://css-tricks.com/examples/ButtonMaker/
CSS Drive CSS3 Button Generator
グラデーションの具合や角丸、ボーダー、テキストの内容などが細かく設定できるのがこちらのCSS Drive CSS3 Button Generator。ドロップシャドウなどの効果や変形まで詳しく設定する事ができる他、オンカーソル時の動き(a:hover)の内容など細かく決められるのはすごいですね！
・CSS Drive CSS3 Button Generator | http://www.cssdrive.com/css3button/
CSS Button Generator
基本のカラーテーマがあらかじめ用意されているのを編集できるのが便利なCSS Button Generatorは、サイズやグラデーションの具合はもちろんフォントのシャドウやボタンシャドウもスライドバーで調整できる優れもの！多すぎず少なすぎない調整項目がちょうどいい上に、基本のカラーテーマが綺麗なのでそのままコピペで使ってもOKな優良CSSボタンジェネレータです。
・CSS Button Generator |
http://css-button-generator.com/
2.5dBUTTON
フラットデザインのボタンを簡単に作るならこちらの2.5dBUTTON！余計なものを削ぎ落としたインターフェイスのシンプルさは、インターフェイスからしてフラットデザイン向けというべきこちらのジェネレータ。ボタンの大きさやフォントサイズや色はもちろん、アイコンを読み込んだり、読み込んだアイコンの大きさまで変えられる便利さがたまりません。
・2.5dBUTTON | http://noht.co.jp/2_5dbutton
フラットデザインの配色に困ったら・・・
フラットデザインにはこういったシンプルなボタンも似合うのでCSSが簡単になっていいやと思ってしまいますが、意外と悩むのが色のチョイス。フラットデザインっぽい色と言ってもどういうものかわからない…という時にはこちらのサイトがおすすめです。Palettaではフラットデザイン向けの色コードがわかる他、一つ色を選択すると相性のいい色を自動的に選んでくれるのがデキる子すぎる！
↓色を選ぶと相性のいい色を選んでくれます
＼一流デザイナーのスキルが身に付く／
まとめ
さて、今回は色々なテクニックを使ったCSSボタンのデザインサンプルやCSSボタンが簡単に作れるジェネレータをご紹介しましたが、いかがでしたでしょうか？素材作りは意外と時間がかかりますよね。今回ご紹介したサンプルやジェネレータをホームページ制作に役立てて頂いて、快適なホームページ作りを行って頂ければと思います。
- この記事を書いた人
- 山崎 響
