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

最終更新日:2018年02月02日  (初回投稿日:2013年08月29日)

前回の [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"> を使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.