マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEBデザイン WEB制作

WEB制作に便利!CSS3ボタンジェネレーター3選

投稿日:2014年5月22日 更新日:

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。
WEB制作の時短にもつながる便利なジェネレーターをご紹介します。

 

btn

「CSS3 Button Generator」

http://css3button.net/

基本のパターンがなんと約2000パターンも用意されています!
ボタンを簡単に生成できるとはいっても、決める項目はかなりあります。1から全部設定するよりも、近いパターンを元に修正を加えていけばいいのでとても助かります!

 

btn02

「CSS Button Generator」

http://css-button-generator.com/

こちらは親切にhtmlまで生成してくれます。
またボタンの後ろの背景まで白、赤系、緑系、青系と用意されているので、自分のサイトの色に近いものを選ぶといいかもしれませんね。

 

btn03

「css3buttongenerator」

http://css3buttongenerator.com/

ボタンのhoverの指定もできます。
テキストを入力できる箇所もあるので、よりイメージがしやすいかもしれません。

 

 

css3でボタンを作れるジェネレーターをご紹介しました。
グラデーションにbox-shadow、text-shadow、border、border-radius・・・などの設定が完成したボタンを見ながら調整できるので、とっても便利です。

シャドウ系はまだしも、グラデーションは複雑だとすっごく長くなって、確認→修正→確認→修正・・・何回やればいいのー!!!なんて経験はありませんか?
またcss3にまだ慣れていないという人にもおすすめです。色やサイズなどを変更すれば、ソースもボタンもすぐに切り替わってくれるので、ソースの理解度も高まるかもしれません。
一発でスタイルが決まるWEB制作の時短に大活躍のボタンジェネレーター、一度使ってみてはいかがでしょうか?

 

 

-CSS, WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

no image

ブラウザによって画質変わっている!?気づかなかった…ブラウザの自動画像処理!

ブラウザによって画質変わっている!?気づかなかった…ブラウザの自動画像処理! http://www.markernet.co.jp/blog/2015/07/31/post-5902/ Faceboo …

【カメラ撮影】写真素材として撮影するために知っておきたいこと ~風景の色彩編~

WEB制作において”良い写真”は欠かせません。 素材を撮影する際に知っておきたいこと、 今回は風景写真撮影での色設定のポイントをご紹介します。 秋は暖色で情緒を感じさせる 例年11月末~12月初旬あた …