[検証1]デフォルトのinput(ボタン型)要素の色と形状
<input type="button" value="ボタン" /> <input type="submit" value="サブミット" /> <input type="reset" value="リセット" />
[検証2]検証1のinput要素にCSSで背景色と角丸を指定
input.btn-blue1 { ----(略)---- background: #0000cc; color: #fff; border: 1px solid #0000cc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
[検証3]input要素を、button要素に置き換える。
button { ----(略)---- background: #0000cc; color: #fff; border: 1px solid #0000cc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
[検証4]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; }
[検証5]背景を色指定ではなく、画像(単色)を指定する。
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; }
[検証6]背景にグラデーション画像を指定する。
[検証7]背景に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;
}
[検証8]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>