submitボタンのデザインをCSSで変える方法
2022年06月8日
メールフォームなどで送信する際のボタン、submitボタン。
デフォルトのままでは少しデザインが物足りないですよね。
そこでCSSでデザインを変える方法をお教えします。
まずはHTML
<input type="submit" value=" 送信 " class="submit-button">
<input type="reset" value="リセット" class="submit-button">次にCSS
.submit-button {
width:150px;
display:inline-block; /*送信とリセットを横並び*/
font-size:16px;
text-align:center;
padding:10px;
background:#ff9900; /*ボタンのカラー（背景色）*/
color:#fff; /*ボタンのフォントカラー*/
line-height:1em;
border:none;
}
.submit-button:hover { /*マウスを合わせた時の処理（hover）*/
color:#fff;
background:#ff0000;
}このようにCSSで指定してhtmlのsubmitのタグにclassで指定してあげればデザインを変更できます。
ボタンに枠線の指定（border）を指定することもできます。
上記のコードを参考にフォントカラーやサイズ、paddingなどを調整して自分のサイトで使ってみてください。