Contact Form7で送信ボタンをカスタムする方法

Contact Form7では下記のコードを配置している。

[acceptance check-box] すべての項目に同意します。 [/acceptance]
[submit class:btn-pink "送信"]

修正前のボタンの状態はこちら。

1. Contact Form7でデフォルトで設定されているスタイルを無効化する

/*デフォルトのスタイルを無効化する*/
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

2. Contact Form7がデフォルトで出力する｢spinner｣も非表示にする

/* Contact Form7がデフォルトで出力する｢spinner｣を非表示 */
span.wpcf7-spinner {
  display: none;
}

これらのデフォルトのスタイルを非表示にしておくと、カスタムしやすくなります。

3. 送信ボタンのCSSを適応する

input[type="submit"] {
  font-size: 18px;
  height: 58px;
  width: 291px;
  /* 角を丸くする */
  border-radius: 3px;
  /* テキストを1行に収め、改行しない */
  white-space: nowrap;
  font-weight: bold;
  /* 0.3秒かけて変化 */
  transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
}

下記のようにボタンの大きさや形を変更できました!!