ワードプレスの鉄板プラグイン『ContactForm7』
便利なんですけど、カスタマイズは正直しづらいですよね。

この黒い線は一体・・・

入力しようとする枠も同じようにフォーカスするので、以下のCSSをつけてみましたが消えませんでした。

a:focus, *:focus {
	outline:none;
}

リンクバナーボタンとおそろいにする

うまくいかないときは他のことをしよう。

というわけで、「送信ボタンを他のリンクボタンとおそろいのバナーデザインにしよう」を先にやっつけることにしました。

「submit」と「a」を＜div＞ではさんで、同じクラスをつけ、共通のCSSをあててみます。
しかしそれだと「submit」は文字にしか反応しません。バナー全体に反応するようにしたいです。

共有するのはやめて、クラスと同じCSSを「submit」に直接あてます。
「.クラス」と「.クラス a」のCSSが合体した状態でまるっとコピペされました。
「同じの並べるなよ、一緒にできなかったのかよ」と言われそうな、じつに美しくないコードですが、仕方がありません。できなかったのです。

・・・と、ここで動作確認していたら、なんと、黒い線も消えていることに気付きました。
いまいち原因がわからないまま、一石二鳥に解決しました。

マウスオーバーの挙動もそろえる

最近、リンクは、マウスオーバーすると半調するようにしています。ラクなので。

a:hover {
	opacity: 0.5;
}

ところが、送信ボタンにはこいつは効きません。
そりゃそうです、こいつは＜a＞ではなく＜input＞
だからといって＜input＞に「opacity」をあてても、無視もしくは最初から半調になるという暴挙に出るので、もう＜input＞の半調はあきらめるしかありません。
ちょっと明るくなる背景色でも指定しておきます。

今度は、＜a＞にもそのCSSをあててやらなければ、おそろいにならなくなりました。
なんだか本末転倒ですが、クラスにわざわざ半調解除のCSSをつけます。
さらにどういうわけか角丸もつけなおしてあげなければならないことが発覚。

送信ボタンを中央揃えにする

毎回、手こずるんですよ。
うまくいかない理由は「 input たちがインライン要素だから」
「input[type=’submit’]」には「text-align: center;」と「margin: 0 auto;」は効きません。
＜div＞ではさんで「text-align: center;」だけあてましょう。

そして、ContactForm7に限ってはもうひとつ手間がかかります。
ビミョウに左にズレるんです。
吐き出されるコードをチェックしてみると、ボタンの直後に「」という見知らぬタグがついています。
これを非表示にすることで、真のセンターになります。

まとめ

完成したCSSはこちら。

/*---------- 送信ボタン ----------*/
input[type='submit'] {
-webkit-appearance: none; /*アイフォンでCSSが無効になるのを防ぐ*/
	width: 100%;
	max-width: 320px;
	background: #66cccc;
	border-radius: 10px;
	border: none;
	color: #fff;
	padding: 20px 0;
	font-weight: bold;
	font-size: 120%;
}
input[type='submit']:hover {
	background: #66dddd;
	transition: all .5s ease; /*変化する時間（0.5秒）*/
}
div.wpcf7 .ajax-loader { /*送信ボタンの右につく余白を消す*/
    display: none !important;
}

/*---------- バナーボタン（送信ボタンと同じデザインにする）----------*/
.bnbtn {
	width: 100%;
	max-width: 320px;
	text-align: center;
	margin: 1em auto;
	background: #66cccc;
	border-radius: 10px;
}
.bnbtn a {
	display: block;
	color: #fff;
	padding: 20px 0;
	font-weight: bold;
	font-size: 120%;
}
.bnbtn :hover {
	background: #66dddd;
	transition: all .5s ease;
	opacity: 10; /* 送信ボタンと挙動そろえるためにリンクの半調は解除 */
	border-radius: 10px; /* ここにコレないと角丸とれちゃう…why… */
}

送信ボタンのHTMLは

<div class="center"><input type="submit" value="送　信"></div>

ContactForm7だったらこう

<div class="center">[submit "送　信"]</div>

ちなみにクラス「.center」は汎用CSS。
こういうときのために要るか要らないかわからなくても書いてるんですから、大いに活用しましょう。