凝ったCSSボタンを一から作るのは大変ですよね。 そんな時はボタンジェネレーターを使えば、簡単に作成できてコピペするだけで使えます。そんなわけでCSS3ボタンジェネレーターをまとめてみました。

目次

CSS Button Generator: Create HTML and CSS Button Styles

CSS3 Button Generator 左サイドバーにサンプル、右サイドバーに設定項目が配置されています。角丸、グラデーション、影、フラットボタンはもちろん、マウスオーバー時の色設定もでき、大体のボタンデザインはここで完結できるのではないでしょうか。画面中央上部の「ADD TO CHROME」クリックでChromeアプリとしても登録できます。 http://www.bestcssbuttongenerator.com/

CSS Button Generator

css button genarator シンプルな画面構成になっていて、サンプルがないのである程度自分で作り込んでいく形になります。 http://css3buttongenerator.com/

CSS3 Button Generator

css3 button genarator 残念なのは、マウスオーバー時の色設定ができないですが、「Showcase」というメニューにはここのサイトでサンプルを作った人たちのサンプルが膨大な数として登録されています。 http://css3button.net/

CSS3 Button Generator – CSS Portal

CSS3 Button Generator - CSS Portal ここも一通りのボタンを作成できますが、サイト名が「CSS Portal」となっており、ボタン以外にも様々なCSSに関するツールが公開されていますので、チェックするのもいいでしょう。 http://www.cssportal.com/css3-button-generator/

coveloping { } CSS Button Generator

coveloping { } CSS Button Generator リンク先を訪れたら、「GO TO TOOL」をクリックして作成ページに移動してください。 ここもいくつかサンプルが用意されており、開閉メニューで設定をするようになっています。 https://coveloping.com/tools/css-button-generator

Free Online CSS3 Typeset Style Generator – Sciweavers

Free Online CSS3 Typeset Style Generator - Sciweavers 少し変わったボタンデザインのサンプルが用意されています。ちょっとアクセントに使えそうです。ページ下部にはさらに便利なツールへのリンクもあります。 http://www.sciweavers.org/i2style

CSS3 Linear Gradient Buttons Generator

CSS3 Linear Gradient Buttons Generator 画面がスクロールすることなく、一画面で操作できるボタンジェネレーターです。 http://dryicons.com/demos/css3-linear-gradient-buttons-generator/

Button builder

Button builder これもシンプルな構成になっており、画面右上の「Change Menu」でフォームや、アイコン、リボンを作成するツールもあります。 http://livetools.uiparade.com/button-builder.html

CSS Generator

CSS Generator これもボタンジェネレーターの機能だけではなく、個別のBorder RadiusやBox Shadow、Text Shadow、グラデーションなどを作成することもできます。 http://www.css3generator.in/css-button.html

CSS Button Generator for your pleasure

CSS Button Generator for your pleasure カスタマイズできる要素は少ないですが、2行のテキストでボタンが作成できます。 http://www.dextronet.com/css-buttons-generator/

あわせて読みたい記事