[49-10-2] input要素で作るボタンの見た目を CSSで変えよう

前回の [49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button) の続きです。

今回は、
<input type="submit"> の送信ボタン、<input type="reset"> のリセットボタン、<input type="button"> の 汎用ボタン のブラウザのデフォルトスタイルを CSSで変更してみよう。

シンプルなCSSで作ったボタンのサンプル

まずは、シンプルなCSSの指定です。背景色や角丸、ボックスシャドウを指定。
マウスオーバーは PCビューでしか効果がありませんが、一応、背景色が変化するようにしています。

HTMLはこちら。

<form class="sampleForm"> <!--CSSの指定のためにform要素にクラス名を付けています-->
  <input type="submit" value="submit">
  <input type="reset" value="reset">
  <input type="button" value="button">
</form>

CSSはこちら。
3行目の -webkit-appearance:none は iPhone（iOS Safari）用です。
iPhoneだけ フォームのボタンのデフォルトスタイルが CSSの変更で書き換わらない場合、-webkit-appearance:none で一旦リセットすると上手く行くはず。

.sampleForm input {
	cursor:pointer;/*カーソルをポインターに*/
	-webkit-appearance: none;/*iOS Safariのデフォルトスタイルをクリア*/
	border-style:none;/*デフォルトのボーダークリア*/
	font-size:130%;
	font-weight:bold;
	color: #fff;
	margin:.5em .5em .5em 0;
	padding:.3em 0 .4em;
	width:150px;
	background:#90E733;/*背景色を指定*/
	-webkit-border-radius: 5px;/*iOS Safari用のボックスの角丸の指定*/
	border-radius: 5px;/*ボックスの角丸の指定*/
	-webkit-box-shadow: 0 2px 2px 0 #666;/*iOS Safari用ボックスシャドウ*/
	box-shadow: 0 2px 2px 0 #666;/*ボックスシャドウ*/
	text-shadow: 1px 1px 2px #000; /*テキストシャドウ*/
}
/*↓マウスオーバー時の変化。ここでは背景色だけ変更*/
.sampleForm input:hover {
	background-color: #54980C;
}

CSSに関する詳細はこちらをご覧ください。
●角丸ボックス： [18-1] 要素を角丸にしよう（border-radius）
●ボックスシャドウ： [18-2] 要素にシャドウをつけよう（box-shadow）
●テキストシャドウ： [18-3] テキストにシャドウをつけよう（text-shadow）
CSSの backgroundプロパティに関しては、【15-1】background関連のプロパティ（1/4）〜 をご覧ください。

応用で、背景色をグラデーションに変えてみたサンプルです。

CSSはこちら。（HTMLは最初のサンプルと同じです）

.sampleForm2 input {
	cursor:pointer;/*カーソルをポインターに*/
	-webkit-appearance: none;/*iOS Safariのデフォルトスタイルをクリア*/
	border-style:none;/*デフォルトのボーダークリア*/
	font-size:130%;
	font-weight:bold;
	color: #fff;
	margin:.5em .5em .5em 0;
	padding:.3em 0 .4em;
	width:150px;
	-webkit-border-radius: 5px;/*iOS Safari用のボックスの角丸の指定*/
	border-radius: 5px;/*ボックスの角丸の指定*/
	-webkit-box-shadow: 0 2px 2px 0 #666;/*iOS Safari用ボックスシャドウ*/
	box-shadow: 0 2px 2px 0 #666;/*ボックスシャドウ*/
/*ここまで↑はさっきと同じ。↓背景だけグラデーションにしています*/
	background:#90E733;/*背景色を指定（オールドブラウザ用）*/
	background: -webkit-linear-gradient(top #90E733, #428000 50%, #90E733) #90E733;/*古めのグラデ指定*/
	background: linear-gradient(#90E733, #428000 50%, #90E733) #90E733;/*モダンブラウザ用*/
}
/*↓マウスオーバー時の変化。ここでは透明度の変更*/
.sampleForm2 input:hover {
	opacity: 0.8;
}

CSSのグラデーションについて詳しくは、
[13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用) をご覧ください。
opacityプロパティ（透明度の指定）に関しては、【8】CSSの「色」と「透明度」の指定 の 透明度の rgba や hsla と、opacityプロパティの使い分け をご覧ください。

背景に画像を仕込んだサンプル

背景に画像を指定下サンプルです。写真などを背景に使いたいときはコレ。

HTMLはこちら。

<form class="sampleForm3">
  <input type="submit" value="submit">
</form>

CSSはこちら。
「送信ボタン」は、どうしても「送信」などのテキストが表示されるので、font-size:0（4行目）でテキストを見えなくしています。
PCブラウザ用に、デフォルトのボーダーを消すために border-style:none（5行目）も指定しています。

.sampleForm3 input {
	cursor:pointer;
	-webkit-appearance: none;/*iOS Safariのデフォルトスタイルをクリア*/
	font-size:0;/*表示されるテキストを見えなくしています;*/
	border-style:none;/*PCブラウザのデフォルトのボーダーをトル*/
	padding:0;
/*↓背景に画像ファイルを指定*/
	background:url(backImage.jpg) no-repeat 0 0;
	width:200px;
	height:41px;
}
/*↓マウスオーバー時の変化。ここでは背景画像の位置を縦に1pxだけずらしています*/
.sampleForm3 input:hover {
	background-position:0 1px
}

背景の指定（8行目）はショートハンドです。
背景画像のURL、リピート無し、位置は左上の基点（x軸0 y軸0）にしています。
マウスオーバー時（14行目）は、位置のみ x軸0 y軸を1px にして、ちょっとずらしています。

CSSのバックグラウンドのショートハンドについて詳しくは、
【15-5】backgroundのショートハンド まとめ をご覧ください。

次回予告

いかがでしたか？
CSSを使えば、ブラウザのデフォルトスタイルも自由にデザイン変更できますね。

次回は、今回使った submit と同じ「送信ボタン」になる、
画像で送信ボタンを作れる <input type="image"> を使ってみましょう。