ことの発端は友人より
「Contact Formで作った特典申請フォームの送信ボタンって、Amazon風のボタンにすることってできるの？」
という質問をたまわり
「できるよ〜」
と、軽いノリで返事をしたものの…。
Amazon風のボタン。
いわゆる「カートに入れる」というコレですね。
しかし、よくよく友人の話を聴いてみると、友人が望むのはWEB2.0風のAmazon風ボタン。
「ショッピングカートに入れる」というコレ。
せっかくなのでフラットデザインタイプのCSS版Contact Formの送信ボタンと、WEB2.0風の画像版Contact Formの送信ボタン。
2種類を作ってみました。
ちなみに現代風フラットデザインを踏襲したCSS版送信ボタンは、イチから自分でCSSソースを作成したわけではなく、こちらの記事を参考に（というか、ほぼコピペ）させていただきました。
参考Amazon「ほしい物リスト」ボタンを作る方法！あのボタンを自作する！ – 生活情報オンライン
参考cssで作るあのサイトのあのボタンみたいなボタン – FOXISM
Amazon風ボタン画像をご利用の方は、右クリックで保存してくださいませ。
目次
ContactForm 7の送信ボタン CSS版Amazon風カスタマイズサンプル
当サイトのWordPressのテーマは「Simplicity」を使用中（2020年1月現在）。
Simplicity以外のWordPressテーマでもお使いいただけると思いますが、Simplicity以外のWordPressテーマにて動作確認をしておりませんので、ご利用の際は個人の責任でよろしくお願いいたします。
送信ボタンにFont Awesome を挿入する方法
Simplicity をお使いの場合、Font Awesomeのインストール等の初期設定は不要。ですが、Simplicity で設定されているFont Awesome のバージョンが最新でないことがあるので、使いたいWEBフォントが対応していない場合は、header.php（子テーマ）に新しいバージョンを記入してください。
header.php（<head>内）に下記を記入。
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
2018年2月28日現在：FontAwesome の最新版は 5.0.7。
参考FontAwesomeの最新版の確認はこちら次にstyle.css（子テーマ）にCSSを追記
/* 送信ボタンにFontAwesome */
input[type=submit] {
font-family: FontAwesome;
}
そしてFont Awesome Icon 一覧で使いたいWEBフォントを探す。
今回は「（play-circle）」を使用しています。
「f144」をコピー。
Contact Formの送信ボタン箇所に先ほどコピーした「f144」に「&#x」を加える。
[submit class:amzn-btn " プレゼントを受け取る"]
Amazon風ボタンCSS版のカスタマイズまとめ
完成品・サンプル
HTML・フォームタグ
ContactFormのフォーム箇所にコピペしてお使いください。
<div class="center">[submit class:amzn-btn " プレゼントを受け取る"]</div>
CSS
お使いのWordPressテーマ（または子テーマ）にコピペしてください。
/* 送信ボタンにFontAwesome */
input[type=submit] {
font-family: FontAwesome;
}
/* Amazon風送信ボタン */
input.amzn-btn {
background: rgb(243,208,120);
background: -webkit-linear-gradient(top,rgba(240,193,75,0.9),rgba(247,223,165,0.9));
background: linear-gradient(to bottom,rgba(247,223,165,0.9),rgba(240,193,75,0.9));
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-color: #a88734 #9c7e31 #846a29;
border-style: solid;
border-width: 1px;
width: 300px;
height: 80px;
color: #111;
font-size: 1.2em;
font-weight: bold;
}
/* Amazon風送信ボタンホバー */
input.amzn-btn:hover {
background: -webkit-linear-gradient(top,rgba(240,193,75,1),rgba(247,223,165,1));
background: linear-gradient(to bottom,rgba(247,223,165,1),rgba(240,193,75,1));
}
/* Amazon風送信ボタンアクティブ */
input.amzn-btn:active {
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
}
/* 送信ボタン中央寄せ */
.center {
text-align:center;
}
送信ボタン以外のCSSデザインはこちらの記事をどうぞ。
ContactForm 7の送信ボタン 画像版Amazon風カスタマイズサンプル
「text-indent: -9999px;」使ってます。すんません。
「text-indent: -9999px;」を使わないやり方も検討してみたのですが、うまく表示されず……。
もしもGoogle先生にインデックスから弾かれたとしても、お申込フォームだし、記事本文（メインコンテンツ）じゃないしいいかな？
と、自己正当化しております。ハイ。
どうしても「text-indent: -9999px;」に抵抗がある方は、下記サイトをご参考くださいませ。
参考css3でtext-indent:-9999px;を使わず画像に置き換える方法をご紹介
参考[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス
「text-indent: -9999px;」を使わずに送信ボタン画像が表示できる方法があれば、教えて下さいませ。
Amazon風ボタン画像版のカスタマイズまとめ
完成品・サンプル
HTML・フォームタグ
ContactFormのフォーム箇所にコピペしてお使いください。
[submit class:amzn-img-btn "プレゼントを受け取る"]
CSS
お使いのWordPressテーマ（または子テーマ）にコピペしてください。
送信ボタンのみのCSSです。
/* Amazon風画像ボタン */
input.amzn-img-btn,
input.amzn-img-btn:hover,
input.amzn-img-btn:active {
background: url("画像のURL") center center no-repeat;
}
input.amzn-img-btn {
border: 0px;
width: 100%;
height: 100px;
text-indent: -9999px;
}
input.amzn-img-btn:hover,
input.amzn-img-btn:active {
cursor: pointer;
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}
送信ボタン以外のCSSデザインはこちらの記事をどうぞ。