最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。
ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多いかと思います。
それらのボタンを短時間で作るためにボタン制作の基本的なCSSは知っておいたほうが良いですね。
今回は一番単純なボタンの装飾を4つご紹介します。
ボタンの装飾をあまりされたことがない人は参考にしてもらえると嬉しいです。
サンプルも作りました。
- ノーマルボタン
- 角丸ボタン
- 長丸ボタン
- 影付きボタン
ボタンの基本装飾HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <!-- ノーマルボタン --> <div class="row"> <a class="normal-button">Normal</a> </div> <!-- 角丸ボタン --> <div class="row"> <a class="kadomaru-button">Kadomaru</a> </div> <!-- 長丸ボタン --> <div class="row"> <a class="nagamaru-button">Nagamaru</a> </div> <!-- 影付きボタン --> <div class="row"> <a class="kagetsuki-button">Kagetsuki</a> </div> </div> |
今回はaタグをボタンのように装飾してみようと思います。
buttonタグはFormの時にしか出番が無いかもしれませんね。
ボタンの基本装飾CSS
1. ノーマルボタン
|
1 2 3 4 5 6 7 8 9 10 |
[class$="button"] { display:inline-block; width:250px; font-size:16px; margin:20px 0px; padding:40px 0px; background-color:white; border:1px solid #CCCCCC; color:#333333; } |
aタグは「inline」なので横幅や高さの指定ができません。
2行目のように「inline-block」にしておくのが基本になります。
上記で通常の四角いボタンはできあがりです。
2. 角丸ボタン
ボタンの角を丸くしたい場合は以下のCSSを追加します。
|
1 2 3 |
.kadomaru-button { border-radius:10px; } |
角丸にしたい場合は、3行目の「border-radius」に角丸具合を設定します。
ボタンのサイズに合わせて値を調整してください。
3. 長丸ボタン
四角ではなく長い丸ボタンにしたい場合は以下のようにします。
|
1 2 3 |
.nagamaru-button { border-radius:80px; } |
角丸ボタンとほぼ一緒です。
「border-radius」の値を大きくすると長丸ボタンになります。
簡単ですね！
影付きボタン
最後に影付きボタンです。
|
1 2 3 |
.kagetsuki-button { box-shadow: 5px 5px #333333; } |
「box-shadow」という属性を使います。
設定する値は影をつける場所、サイズ、色などを設定できます。
サンプルを作成しています。
サンプルを参考にデザインされたボタンに近付けていくと楽ですね。
