コラム

submitボタンのデザインをCSSで変える方法

2022年06月8日
submitボタンのデザインの変え方

メールフォームなどで送信する際のボタン、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などを調整して自分のサイトで使ってみてください。