問題
cssでフォームの送信ボタンをカスタマイズするには？
解決策
cssでデフォルトの設定である「border」と「background-color」を上書きします。
フォームの送信ボタンのデフォルトのcssをカスタマイズ
フォームの送信ボタンをデフォルトの装飾ではなく、独自にカスタマイズするために、cssでフォームの送信ボタンをカスタマイズする方法をご紹介します。
DEMOはこちら
HTMLはこちら
フォームのボタンをクラス「formbottom」で囲い、各ボタンにクラス「btn」を設定します。
<form>
<p class="formbottom">
<input type="submit" value="送信" class="btns submit">
<input type="reset" value="リセット" class="btns reset">
</p>
</form>CSSはこちら
フォームのボタンに対して、「border」と「background-color」を設定して、デフォルトのcssの設定を上書きします。
form .formbottom {
text-align: center;
}
form .btns{
display: inline-block;
vertical-align: middle;
margin: 0 10px;
padding: 6px 25px;
color: #F15A24;
font-weight: bold;
letter-spacing: 0.5pt;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #F15A24;
cursor: pointer;
transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-o-transition-duration:0.3s;
-ms-transition-duration:0.3s;
}
form .btns:hover{
color: #ffffff;
background-color: #F15A24;
}
コメント