ここでは、input要素でボタンに擬似要素を適用させたい方が参考になりそうなお話をします。結論から言うと、input要素に疑似要素は適用できません。
例えば、リンクタグならこういうデザインが素直に作れるわけですが（疑似要素で右に矢印を入れています）。
HTML
<a href="#" class="button">申込み</a> |
CSS
a.button { |
display: block; |
margin:0 auto; |
text-decoration: none; |
border: none; |
outline: 0; |
cursor: pointer; |
color: #fff; |
background: #555; |
font-weight: bold; |
position: relative; |
height: 3.0em; |
line-height: 3.0em; |
width: 100px; |
padding: 0 0.8em 0 1.2em; |
transition: 0.5s; |
} |
a.button::after{ |
transition: 0.5s; |
content: ""; |
width: .6em; |
height: .6em; |
border-top: 2px solid #fff; |
border-right: 2px solid #fff; |
position: absolute; |
top: -2px; |
bottom: 0; |
right: 20px; |
margin: auto; |
-webkit-transform: rotate(45deg); |
-ms-transform: rotate(45deg); |
transform: rotate(45deg); |
} |
a.button:hover::after{ |
right: 12px; |
} |
a.button:hover { |
background: #134767; |
} |
input要素をボタンにしたものでは同じように行きません。
HTML
<input type="submit" value="申込み"></div> |
CSS
input[type="submit"]{ |
display: block; |
margin:0 auto; |
text-decoration: none; |
border: none; |
outline: 0; |
cursor: pointer; |
color: #fff; |
background: #555; |
font-weight: bold; |
position: relative; |
height: 3.0em; |
line-height: 3.0em; |
width: 100px; |
padding: 0 0.8em 0 1.2em; |
transition: 0.5s; |
} |
input[type="submit"]::after{ |
transition: 0.5s; |
content: ""; |
width: .6em; |
height: .6em; |
border-top: 2px solid #fff; |
border-right: 2px solid #fff; |
position: absolute; |
top: -2px; |
bottom: 0; |
right: 20px; |
margin: auto; |
-webkit-transform: rotate(45deg); |
-ms-transform: rotate(45deg); |
transform: rotate(45deg); |
} |
input[type="submit"]:hover::after{ |
right: 12px; |
} |
input[type="submit"]:hover { |
background: #134767; |
} |
上記は、inputタグに同じスタイルシートを適用させた例です。
input要素は置換要素といって少し特殊な要素のため疑似要素が効きません。でも、お問合せフォームなどで送信ボタンがinput要素になっている場合はどうしたらよいでしょうか。そういうときは、次のようにします。
HTML
<div class="button_wrap"><input type="submit" value="申込み"></div></div> |
CSS
input[type="submit"]{ |
font-size: 1.0em; |
display: block; |
border: none; |
outline: 0; |
cursor: pointer; |
color: #fff; |
background: #555; |
font-weight: bold; |
height: 3.0em; |
line-height: 3.0em; |
width: 100%; |
padding: 0 2.5em 0 0.8em; |
transition: 0.3s; |
} |
.button_wrap{ |
color: #fff; |
position: relative; |
line-height: 2.8em; |
width: 130px; |
transition: 0.5s; |
margin:0 auto; |
} |
.button_wrap::after{ |
transition: 0.3s; |
content: ""; |
width: .6em; |
height: .6em; |
border-top: 2px solid #fff; |
border-right: 2px solid #fff; |
position: absolute; |
top: 0; |
bottom: 0; |
right: 20px; |
margin: auto; |
-webkit-transform: rotate(45deg); |
-ms-transform: rotate(45deg); |
transform: rotate(45deg); |
} |
.button_wrap:hover::after{ |
right: 12px; |
} |
input[type="submit"]:hover { |
background: #134767; |
} |
ポイントはinput要素をdivでラップすることです。
どうしてもinput要素に疑似要素を入れたい場合は、inputをdiv要素などでラップして、それに対してにスタイルシートを組みます。これで、実装できました。
