CSSでボタンを作る事はそれほど難しくありません。ただその表現の幅はとても広く奥が深いものがあります。
このページでは、CSSでボタンを作る為の基本的な考え方を抑えながら、いくつかの使いやすいボタンデザインのサンプルを制作ポイントと合わせてご紹介します。
CSSでボタンを作る意味
CSSでボタンを作るメリットは、表現の変更がCSSで出来るので容易に変更ができ、またボタンのテキストも簡単に変更できる事ができまる点にあると思います。
ベースがCSSなので、同じデザインボタンでありながら、ボタンのテキスト内容は別のものにする事もできるので、汎用性が広い点も見逃せないポイントかと思います。
ボタンの基本デザインの作り方
a要素に対してCSSでデザインを設定していきます。a要素だけでは要素が足りない場合は、div要素などをを追加し表現の幅を広げていきます。
これから基本のボタンの作り方を流れに沿ってご説明したいと思います。
各パートCSSのソースを記載していますが、下記のhtmlを前提に記述しています。
<a href="https://www.yahoo.co.jp">CSSのボタン</a>
１）ボタンに色を付ける
a要素に対して「background-color」で背景を塗りつぶすことで、ボタンの色を決定します。
また文字のサイズや色を設定し文字の体裁を整えます。「text-decoration:none」を設定し、a要素のテキストに自動で付く下線も消しておきます。
a {
background-color: #26934c;
color: white;
font-weight: bold;
text-decoration: none;
}
２）ボタンのサイズを調整する
a要素はインライン要素なので、そのままでは幅指定が効きません。ですのでa要素に対して「display:block」を設定し、ブロック要素に変換します。
ボタンのサイズはwidth、heightでも可能ですが、レスポンシブ対応を想定するならpaddingやmax-widthなどを使って調整する事をオススメします。特に高さはpaddingで調整する方がフレキシブルなデザインに対応できます。
a {
(略 - 前項参照）
display: block;
max-width: 350px;
padding: 15px 0;
}
３）デザインを微修正する
テキスト位置を調整したり、角を丸めたり見た目の調整を行います。
全体の骨格が見えた所で、あらためて背景色は文字サイズなども合わせて調整します。
a {
(略 - 前項参照）
text-align: center;
border-radius: 50px;
}
これでボタンデザインの基本は終わりです。ここまで理解すれば、後は表現の幅をどう広げていくかだけとなります。
ボタンデザインのサンプル例
ここからはボタンのいくつかの使いやすいデザインのサンプルをご紹介します。
CSSの知識があればデザインの変更はそれほど難しくないと思いますので、自由にカスタマイズしてご活用ください。
ボタンに影を付ける
ボタンに影を付ける事で奥行きが出てボタンの存在感が増します。あまり影をハッキリさせ過ぎないのがポイントです。
a {
display: block;
max-width: 250px;
padding: 20px;
text-align: center;
font-weight: bold;
color: white;
background-color: #2eb9ac;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
border-radius: 50px;
text-decoration: none;
}
ボタンを立体にする
「border-bottom」を利用してボタンを立体的に見せます。borderの線の色を、ボタンの色の同色の濃い色を使うと立体的に見えます。
a {
display: block;
max-width: 250px;
padding: 20px;
text-align: center;
font-weight: bold;
color: white;
background-color: #ce9307;
border-radius: 15px;
border-bottom: 5px solid #513602;
text-decoration: none;
}
正円ボタン
ボタンだけでなくアイコン的な使い方も出来る正円の表現の仕方です。丸ボタンを作る時は「width」「height」「line-height」に同じサイズを指定してください。「lline-height」で縦の位置を決定しています。
a {
display: block;
width: 150px;
height: 150px;
line-height: 150px;
padding: 0;
text-align: center;
font-weight: bold;
color: white;
background-color: #c84e87;
border-radius: 50%;
text-decoration: none;
}
二重線で囲まれたボタン
普段はあまり使う事が少ない「border」の「double」を使うと、ボタンのデザインにアクセントをつける事が出来ます。
a {
max-width: 250px;
padding: 20px;
text-align: center;
font-weight: bold;
color: white;
background-color: #4698e1;
border: 6px double #234579;
text-decoration: none;
}
最後に
CSSのボタンと検索すると本当にCSSだけで表現しているのかと驚くよな表現のボタンを作っているサイトがたくさん出てきます。
凄く刺激も受けると思いますので、ぜひ色々なCSSボタンのデザインを探してみてください。