CSSボタンが簡単に作れる「CSS Button Generator」

CSS Button GeneratorCSS3を使い始めたころ色んなサイトを見てCSSで書かれたボタンをFireworksで作ってましたごめんなさい・・・
Fireworksで作るのが悪いわけではありませんが。

CSSで書くにしてもめんどくさかったりしますもん・・・

と言うわけでCSS Button Generatorの紹介。

CSS Button Generatorはテキスト(2行)、フォントサイズ、フォントカラー、テーマカラー、角丸、パディングをUI上で決めるだけでCSSを自動で出力してくれるサービスです。

ちなみに上のイメージ内のボタンのだと

と、こんな感じになります。
一応コメント入れておきましたのでCSSリテラシーのある方はお分かりかと思います。

では実際のhtmlはどう記述するか。

こんな感じ。

なーラクだろーがー。

こういうツールを使ってCSS3の勉強なんてのもいいんじゃないかとね。

【追記】
CSS内「.shiny-button」と「.shiny-button:active」の、それぞれ最終行のpaddingの値が大変なことになってますね・・・
ドット以下の数字は消しても構いませんけど、値を大きく変更するとアクティブ時にボタンの高さが変わってしまって気持ち悪くなりますので、気をつけて!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク