マーカーネット株式会社

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

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

関連記事

ブクマするならコレ! 素材探しで迷わない、商用利用可能な素材サイト

ブクマするならコレ! 素材探しで迷わない、商用利用可能な素材サイト

こんにちは! Webデザイナー初心者のKです! 本日はWeb制作をされている方なら誰しもがぶちあたるであろう、 著作権について、色々と熱く語ります!! ・・というのは、長ーーーくなるので!! 商用利用 …

WEBデザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

みなさん こんばんは! デザイナーKです! 今回、私が皆さんにご紹介する内容は! 仕事で使えるイラスト素材サイトです!! 1.ほらぱれっと 私が好きなパステルトーンの可愛い素材が揃っているサイトです。 …

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …