小技集

【CSS】CSS3でボタン作成

  • このエントリーをはてなブックマークに追加

Web制作と切っても切れない関係にある”ボタン”ですが、これまでフォトショやイラレで作ることが一般的でした。
しかしながら最近ではCSS3の恩恵もあり、CSSでデザインを組み込むことが多くなりました。

そこで、今回はCSS3がいまいち理解できていなくてもボタンが作れるジェネレーターがご紹介致します。
使いやすいUIの物が多いので、是非一度使ってみてください!

CSS 3.0 MAKER

なんともオシャレなUIです。
border-radiusからgradientまでCSS3で指定できるものが多く揃っています。ボタンと言うか、なんでもいけますね!
オールマイティージェネレーター君

CSS 3.0 MAKER

CSS Border Radius Generator

分かりやすいUIが特徴の「CSS Border Radius Generator」
角にある数字を変えれば何がどうなるのか一目瞭然です。border-radiusに特化したジェネレーター。

CSS Border Radius Generator

CSS3 Button Generator

その名の通り、ボタンのためのジェネレーターです。
backgroundやborder、shadowが指定できます。テキストにCSS指定できるのも嬉しいですね。

CSS3 Button Generator

Ultimate CSS Gradient Generator

「Gradient Generator」とあるので、グラデーションに特化したジェネレーターになります。
これまでフォトショなどでグラデーションの背景画像を作っていた方、今はこれ一つでOKです。

Ultimate CSS Gradient Generator

box-shadowジェネレーター

box-shadowに特化したジェネレーター。UIを見ると、borderの指定もできるようになっています。
FirefoxやChromeなどのブラウザ用にベンダープレフィックス付きのCSSも作成してくれます!

box-shadowジェネレーター


いかがでしたでしょうか?
今の時代多くのツールの世に放たれているので、使わない手はないと思います。
時間をかけるべきではないところにあまり時間を使わないようにしたいですね。

  • このエントリーをはてなブックマークに追加

コメントを残す

*