マーカーネット株式会社

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

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

関連記事

フォントをまとめて比較!ウェブサービス「wordmark-it」

フォントをまとめて比較!ウェブサービス「wordmark-it」

こんにちは。マーカーネットスタッフのSです。 今回はデザイン制作に便利なサービスをご紹介したいと思います。 デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。 …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

中国でWEBサイトマーケティング考えてる方への 両国の大きな違い②

一般的にWEBサイトを展開する場合、最初に考えることの一つにドメインの問題があります。 中国でも.comなどの一般的なドメインは.cnよりも簡単に取得可能ですが、その先にICP登録という問題があります …

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成!

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …