CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる

カテゴリ：CSS3関連 2009年12月12日 00:04

最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。n 内容は、「CSS3だけで丸いボタンを作る」です。

画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。n

今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんｗ
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。n

デモ

▼EntryMore▼

実はたいしたことしていませんｗ
メインは角丸を設定するborder-radiusです。
この値をボックスの半分の値に設定するだけです。それだけで丸くなります。n

ただそれだけだと見栄えとか色々あれなので、Firefox3.6 から実装されるグラデーション機能なんかも使って、それっぽいボタンに仕上げてみました。n

ちなみに、グラデーションに関する仕様が変更されたようで、WebKit 系と Firefox3.6 では指定の方法が異なります。詳しくは各ブラウザで先行実装しているCSS3プロパティまとめに色々載っているので参考にしてみてください。n

さらに、WebKit 系でデモを見ると、背景の変化がアニメーションでなめらかに変わるようになっています。
アニメーションに関しては CSS3はアニメーションも指定できる！で詳しく書いてます。n

また文字についてはtext-align: centerで左右中央配置、line-height: 80px（ボタンの高さと同じ値）で上下中央配置にしています。n

この記事のカテゴリー一覧を見る⇒CSS3関連

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/166