【ほぼ自分用メモ】CSSだけでボタンを作る時の基本型

 /  Tech

3 State Squared Corner Button PSD
photo credit: Zack D. Smith via photopin cc

 この記事について:素人なりにいろいろやってみた結果、「これを基本型にしておけば応用効くんじゃない?」というCSSだけで作るボタンができたというほぼ自分用メモ。

スポンサーリンク

はじめに

CSSだけでボタン作るとかってカッコイイですよね。

初めて知った時は、CSSだけでボタンを作るという意味がわかりませんでした。なぜなら、そういうものは画像で作るものと思っていたから。
でも、うまく表現するとできるものなんですね。初めて知った時はとても驚きました。

素人なりにいろいろやってみた結果、「これを基本型にしておけば応用効くんじゃない?」「もしまた検索とかで調べる場合もある程度内容は理解できるんじゃない?」いうものができたというほぼ自分用メモです。

早速紹介します

実物はこちら

ボタン

HTMLはこちら

CSSはこちら

ポイント

  • text-shadow(テキストの影)、linear-gradient(グラデーション)、border-radius(角丸)を使用
  • 可能な限り様々なバージョンのブラウザにも対応するためCSSハックとベンダープレフィックス、IEフィルターを使用

おわりに

CSS3において、様々なバージョンのブラウザに対応するというのは調べ出すとキリがないですね。
一応これでおおよその基本はできていると思うのですがどうでしょうか。不足分、修正分があれば追記予定。CSS3の表現は難しいですね。

 タグ:

スポンサーリンク
スポンサーリンク
Ads by medi8