マーカーネット株式会社

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

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

関連記事

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

WordPressをインストールするとユーザー名「admin」が自動的に割り振られ 変更できないバージョンもございました。 ハッキングする側はパスワードを当てるだけでログインすることが可能になります。 …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

Adobe XDの無料おすすめプラグイン8選 その①

Adobe XDの無料おすすめプラグイン8選 その①

こんにちは、デザイナーのAです。 今回はデザインの作業効率をUPするAdobe XDのおすすめプラグインを紹介します!   Adobe XDプラグインの追加方法 方法は主に2種類あります。 …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-1-

こんばんは、デザイナーのOです。 実は私はグラフィックデザイナー出身で、約1年半前にWeb業界に入りました。 Webについてまだまだ勉強中の自分ですが、 実際にWeb制作に携わって感じた、グラフィック …

【フラットデザインに+α】2014年のWebデザイントレンド3選

【フラットデザインに+α】2014年のWebデザイントレンド3選

近年、あちこちのサイトで見かけるようになったフラットデザイン。 レスポンシブと組み合わせたり、フルスクリーン表示にさせたりと応用法も様々に、オシャレなWEBサイトが増えていますね! そこで、今回はこの …