スポンサーリンク
はじめに
CSSだけでボタン作るとかってカッコイイですよね。
初めて知った時は、CSSだけでボタンを作るという意味がわかりませんでした。なぜなら、そういうものは画像で作るものと思っていたから。
でも、うまく表現するとできるものなんですね。初めて知った時はとても驚きました。
素人なりにいろいろやってみた結果、「これを基本型にしておけば応用効くんじゃない?」「もしまた検索とかで調べる場合もある程度内容は理解できるんじゃない?」いうものができたというほぼ自分用メモです。
スポンサーリンク
早速紹介します
実物はこちら
HTMLはこちら
1 |
<a class="button" href="#">ボタン</a> |
CSSはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
a.button { display: inline-block; *display: inline; *zoom: 1; color: #333333; font-size: 12px; text-decoration: none; -webkit-text-shadow: 0px 1px #ffffff; -moz-text-shadow: 0px 1px #ffffff; -o-text-shadow: 0px 1px #ffffff; filter: progid:DXImageTransform.Microsoft.Glow(Strength=1, Color='#ffffff'); -ms-text-shadow: 0px 1px #ffffff; text-shadow: 0px 1px #ffffff; margin: 0; padding: 5px 10px; border: 1px solid #cccccc; background: #e5e5e5; background: -webkit-linear-gradient(top, #ffffff, #e5e5e5); background: -moz-linear-gradient(top, #ffffff, #e5e5e5); background: -o-linear-gradient(top, #ffffff, #e5e5e5); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff', EndColorStr='#e5e5e5'); background: -ms-linear-gradient(top, #ffffff, #e5e5e5); background: linear-gradient(to bottom, #ffffff, #e5e5e5); -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } a.button:hover, a.button:focus { background: #e8e8e8; } |
ポイント
- text-shadow(テキストの影)、linear-gradient(グラデーション)、border-radius(角丸)を使用
- 可能な限り様々なバージョンのブラウザにも対応するためCSSハックとベンダープレフィックス、IEフィルターを使用
おわりに
CSS3において、様々なバージョンのブラウザに対応するというのは調べ出すとキリがないですね。
一応これでおおよその基本はできていると思うのですがどうでしょうか。不足分、修正分があれば追記予定。CSS3の表現は難しいですね。
スポンサーリンク
スポンサーリンク