CSSで送信ボタンを指定、デザインする方法

WordPressのプラグインなどでカンタンにフォームを導入することができます。

そのフォームのデザインをサイトに合わせるために送信ボタンを調整する必要もあるでしょう。

また、送信ボタンはどんなデザインがいいのか工夫する必要があります。

私はWebデザイナーとして9年働いていました。

一般的なサイトのメールフォームだけではなくWebシステムのデザインの作成もしていました。

CSSで送信ボタンを指定、デザインする方法を解説します。

送信ボタンはinput[type="submit"]で指定する

送信ボタンのhtmlは「<input type="submit" value="送信">」となっていることが一般的です。

この場合CSSセレクタでは「input[type="submit"]」で指定することができます。

<style>
.example input[type="submit"]{
    width: 100px;
}
</style>
<form class="example">
    <input type="submit" value="送信">
</form>

submit以外の送信ボタン

submitによる送信ボタンはマウスによるクリック以外にEnterキーで送信ボタンを押すこともできます。

これは便利な反面、意図しない送信を招く場合があります。

「改行のつもりでEnterを押したのに送信されてしまった」ということもあるかもしれません。

これを防ぐためにsubmit以外のボタンを送信ボタンとして使うことがあります。

下記は「<input type="button" value="送信">」の例です。

<style>
.example input[type="button"]{
    width: 100px;
}
</style>
<form class="example">
    <input type="button" value="送信">
</form>

submitもbuttonも見た目上は変わらないためsubmitの代わりにbuttonを使うことができます。

この場合CSSセレクタでは「input[type="button"]」で指定することができます。

上記以外にも<button>タグや<a>タグが使われている場合があります。

いずれにしてもhtmlを確認してからCSSを指定しましょう。

htmlを確認するにはDevToolsを使うことをオススメします。

確認したいhtml上で右クリックから「検証」をクリックするとDevToolsが起動しhtmlやCSSを確認することができます。

DevToolsの具体的な使い方は下記をご覧ください。

送信ボタンのデザイン

送信ボタンのデザインはどのようにするべきか考えていきましょう。

フォームの目的は「送信されること」です。

いくらフォームを入力しても送信されなければ無意味です。

ユーザーに間違いなく送信ボタンを押してもらう必要があるわけです。

これを踏まえて送信ボタンのデザインは下記が重要でしょう。

目立たせる

目立たせるには下記がポイントになります。

色を大きく変える

背景と比較して大きく違う色を使うと目立ちます。

背景が白の場合は濃い色です。「送信」の文字が白でも見やすいくらいの濃い色がいいでしょう。

サイトのメインカラーに合わせてもいいですし、アクセントカラーとしてあえてメインカラーと真逆の色を使って目立させる方法もあります。

調和を取りつつ色を選択しましょう。

大きくする

大きくすることで自然と目に入ってきます。

「送信ボタンを見逃す」ことを防ぎましょう。

左か真ん中に配置する

フォームを縦に入力していって、その視線上に送信ボタンがあることが重要です。

右端にあっても目に入りません。

左がいいのか真ん中がいいのかについて、フォームが小さく左寄りの場合は左寄せがいいでしょう。

フォームが真ん中寄せ、あるいは大きいのなら中央寄せがいいでしょう。

押せることがわかる

押せることがわかるようにするには下記に注意するといいでしょう。

• 四角で囲みボタンらしくする
• ボタンの範囲内の大きさ（大きすぎない）
• サイト内の他のボタンと似たデザイン
• マウスを乗せたとき変化する（PCのみ）

ただし、最近のボタンは四角に色がついているだけで成り立つものが多いためそこまで大きく変化させる必要はないでしょう。

「戻る」ボタンと区別する

メールフォームでは入力内容を修正できるように送信ボタンの前に「戻るボタン」があることが一般的です。

この「戻るボタン」が送信ボタンと同じデザインだと、ユーザーが送信ボタンを押したつもりで戻るボタンを押していて、送信せずにフォームを閉じてしまう可能性があります。

そもそも「戻るボタン」なんてめったに使われません。「念のため」の機能です。目立たせる必要はないのです。

ということで「戻るボタンを目立たせない」ことは「送信ボタンを目立たせる」ことと同じくらい重要なのです。

まとめ

送信ボタンのCSS指定方法

html「<input type="submit" value="送信">」はCSSセレクタ「input[type="submit"]」で指定する

submit以外の送信ボタン

Enterキーの誤送信を防ぐためあえてsubmitを使わない場合がある

送信ボタンのhtmlを確認してhtmlに応じてCSSを指定する

送信ボタンのデザイン

• 目立たせる
• 押せることがわかる
• 「戻る」ボタンと区別する

以上、CSSで送信ボタンを指定、デザインする方法でした。