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

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

CSS3で丸いボタンを作成したサンプル

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

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

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

▼EntryMore▼

HTML ソース

CSS ソース

解説

実はたいしたことしていませんw
メインは角丸を設定する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