ボタンコントロールのスタイル変更 - CSS
CSSを用いてHTMLのボタンコントロールの外観を変更するコードを紹介します。
コード
以下のHTMLファイルを作成します。
HTMLファイル
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="button.css" />
</head>
<body>
<div><button type="submit">Button1</button></div>
<hr />
<div><button class="cssbutton1" type="submit">Button2</button></div>
<hr/>
<div><button class="cssbutton2" type="submit">Button3</button></div>
<hr />
<div class="buttonFrame"><button class="cssbutton3" type="submit">button4</button></div>
<hr />
</body>
</html>
button.css
.cssbutton1 {
background-color: #4D90FE;
}
.cssbutton2 {
border:none 0px;
background-color: #4D90FE;
}
.buttonFrame {
background-color: #4D90FE;
width:96px;
height:32px;
}
.cssbutton3 {
border: none 0px;
background-color: transparent;
width:100%;
height:100%;
}
解説
ボタンの外観を変更する場合も一般の要素と同様にclass,id等のセレクタで指定してスタイルを変更できます。
<div><button type="submit">Button1</button></div>
上記の最初のボタンのコードはスタイルシートで外観を指定しない、デフォルトのボタンを表示します。
<div><button class="cssbutton1" type="submit">Button2</button></div>
2番目のボタンはCSSでbackground-colorのみを指定しています。
<div><button class="cssbutton2" type="submit">Button3</button></div>
3番目のボタンはCSSでbackground-colorとborder:noneを指定しています。
<div class="buttonFrame"><button class="cssbutton3" type="submit">button4</button></div>
4番目のコードではボタンの背景色を透過にし、外側を囲むDIV枠に背景色を設定しボタンに色がついているように見せるコードです。このコードでもボタンとして正しく動作します。
実行結果
HTMLファイルを表示します。下図の表示結果となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2014-03-10
作成日: 2014-03-06
