[CSS]画像無しで作成する美しいデザインのボタンのスタイルシート

Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。

キャプチャは上から、ノーマル時、ホバー時、クリック時です。

デモのキャプチャ

Make CSS3 buttons that are extremely fancy
デモページ
デモページ(カラーバリエーション)
※更新:カラーバリエーションを増やしました。

ボタンはCSSで実装されているため、ブラウザの文字サイズの拡大に伴いサイズも変更し、カラー変更も簡単におこなえるように設計されています。
※CSS3非対応のIE7/8などでの見栄えはそれなりになります。

実装はシンプルながらもテクニカルで、先日当サイトで紹介した「Safariで見かける角丸のにじみを解消するスタイルシート」なども利用されています。

HTML

ボタンのカラー変更が簡単にできるようにインラインスタイルシートを使用しています(下記キャプチャ参照)。

デモのキャプチャ

背景色(background-color)を「#000」に変更

CSS

CSS3の指定はオンラインサービスを利用すると、手軽にできます。

top of page

©2017 coliss