画像を使わずにCSSだけでボタンを作成

こんばんは! Benです。
ホームページネタが続きますが、今回はCSSだけでボタン風のリンクを作ろう!というものです。職場のホームページでもメインメニューやお問い合わせボタンなどあり、3Dにするまで凝らないけれど、グラデーションと丸い縁取りでボタン風にしました。
20160228a.PNG
↑完成形はこれです

昔の方法は、ボタン全体を画像で作るか、あらかじめグラデーションや縁のパーツを画像で作り、背景にしてつくるなど、画像が必要でした。今はCSSのバージョン3により、画像を使わなくてもかなりボタンチックなリンクが作れるようになりました。IEのサポートが9以上になったことからCSS3対応を標準としていいと思います。

ボタンですよ
<-- CSS部分 -->


<-- HTML(body)部分 -->
ボタンですよ
上記のボタン風のものをCSSだけで表記するのはご覧のような記述になります。/* ○○ */部分は説明のコメントなので不要です。実際はもう少し設定が必要ですが、これでもここまで表現できます。

ボタンですよ
先ほどのCSSにborder-radius:8px;を足しました。角に丸みが出ました。どのくらい丸みを出すかという値で、ご覧のように一つだけ値を指定すると、四隅全てこの値で表示します。それぞれのコーナーごとに丸みを指定することができます。

ボタンですよ
さらに追加でborder:1px solid #888888;を足しました。境界線をグレーで描くことによってオブジェクトとしての存在感がはっきりしますね。ここまで来て完成形と比べて何が足りないのか? それは影ですね。

ボタンですよ
というわけで最後に影を足すべくbox-shadow: 2px 2px 1px 1px rgba(0,0,0,0.2);を追加して完成です。これに関してはもその名のとおり「勉」強中です(^^; CSS3を使えば、面倒な画像作成をすることなく、ボタン風のリンクを作成できます。次回は、このボタンを押そうとしてマウスカーソルを乗せたりしたときどう動くか? をノートします。馬車がカボチャに戻る前におやすみなさい

この記事へのコメント


この記事へのトラックバック