スタイルシートでボタンを作る

HOME ＞HTML＞スタイルシートでボタンを作る

スタイルシートの設定内容

適当なクラス名で以下のような項目を設定し、spanタグで装飾します。

(1) 文字背景色(ボタンの色)：background

(2) 文字色：color

(3) 文字サイズ(省略可)：font-size

数値で固定する他に％や７段階表示で標準に対する相対的なサイズを設定する方法があります。
７段階表示：xx-small/x-small/small/medium(標準)/large/x-large/xx-large や smaller/larger
※数値で固定すると、ユーザー側の解像度や画面サイズの変化に対応できない場合があります。

(4) 文字の太さ(省略可)：font-weight

100～900の9段階があります。一般的な太字はbold、標準はnormalで表示でき、それぞれ、700と400に相当します。

(5) 文字が改行されないようにする。white-space:nowrap

(6) 枠線(太さ、種類、色)：border

線の種類：solid(実線)、inset(全体がへこんで見える)、outset(全体が飛び出して見える)、groove(枠線部がへこんで見える)、ridge(枠線部が飛び出して見える)、double(二重線)、dotted(点線)、dashed(破線)

(7) 枠線から文字までの余白：padding

サンプル

ボタン１

スタイルシート

.btn1{
　background:#39f;
　color:#fff;
　font-weight:bold;
　white-space:nowrap;
　border:1px solid #039;
　padding: 5px 5px 3px 5px;
}

HTML

ボタン１

ボタン２

スタイルシート

.btn2{
　background:#ff0;
　color:#039;
　font-weight:bold;
　white-space:nowrap;
　border:3px outset #ffff00;
　padding:3px 3px 3px 5px;
}

HTML

ボタン２

ボタン３

スタイルシート

.btn3{
　background:#00f;
　color:#fff;
　font-weight:bold;
　font-size:larger;
　white-space:nowrap;
　border:3px ridge #cff;
　padding: 5px 3px 5px 5px;
}

HTML

ボタン３

※リンクボタンにする場合は、以下のような文字設定も必要です。
下線なし：a { text-decoration:none }、未訪問色：a:link、訪問済色 a:visited、ポイント時色 a:hover、選択中色 a:active

《 スタイルシートでボタンを作る 》

《スタイルシートでボタンを作る》