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

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

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

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

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

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

▼EntryMore▼

HTML ソース

CSS ソース

解説

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

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

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

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

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

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

  • Hatenaブックマークに追加 Hatenaブックマーク数
  • livedoorクリップへ追加 livedoorクリップ数
  • Buzzurlにブックマーク Buzzurlブックマーク数
  • POOKMARK Airlinesへ追加
  • del.icio.usに追加

トラックバックURL

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

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。