［検証１］デフォルトのinput（ボタン型）要素の色と形状

<input type="button" value="ボタン" />
<input type="submit" value="サブミット" />
<input type="reset" value="リセット" />

　

［検証２］検証１のinput要素にCSSで背景色と角丸を指定

input.btn-blue1  {
  ----（略）----
  background: #0000cc; 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;	
  -moz-border-radius: 3px;	
  border-radius: 3px;	
}

　

［検証３］input要素を、button要素に置き換える。

button  {
  ----（略）----
  background: #0000cc; 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;	
  -moz-border-radius: 3px;	
  border-radius: 3px;	
}

　

［検証４］CSSで「-webkit-appearance: button;」を追加、または「-webkit-appearance: none;」を追加。

input.btn-blue2		{
  ----（略）----
  background: #0000cc; 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;	
  -moz-border-radius: 3px;	
  border-radius: 3px;	
  -webkit-appearance: button;　
  ----または----
  -webkit-appearance: none;
}

　

［検証５］背景を色指定ではなく、画像（単色）を指定する。

input.btn-blue3		{
  ----（略）----
  background: #0000cc url(img/bg-mediumblue2.png); 
  color: #fff;
  border: 1px solid #0000cc;
  -webkit-border-radius: 3px;	
  -moz-border-radius: 3px;	
  border-radius: 3px;	
}

　

［検証６］背景にグラデーション画像を指定する。

　

［検証７］背景にCSSグラデーションを指定する。

	input.btn-blue5　{

  	----（略）----
  	
　background: -moz-linear-gradient(top, #3378e7, #164fac 50%, #143771);
	
　background: -webkit-gradient(linear, left top, left bottom, from(#3378e7), color-stop(0.5, #164fac), to(#143771));
	
　background: -o-linear-gradient(top, #3378e7, #164fac 50%, #143771);
	
　background: linear-gradient(top, #3378e7, #164fac 50%, #143771);	
	
　color: #fff;
	
　border: 1px solid #0000cc; 
	
　-webkit-border-radius: 3px;
	
　-moz-border-radius: 3px;
	
　border-radius: 3px;

	}

　

［検証８］span要素に「-webkit-appearance: button;」や
「-webkit-appearance: push-button;」を指定。

button push-button 
<span style="padding:3px 8px; margin:10px; -webkit-appearance: button;">button</span>

<span style="margin:10px; -webkit-appearance: push-button;">push-button</span>

 

inserted by FC2 system