ワードプレスのコンタクトフォーム７（お問い合わせフォーム）についてる「送信」ボタンのデザインを変更してみたので、その方法をここに残しておく！！

CSS Button Generatorでボタンのデザインをする

CSSだけでボタンデザインが簡単にできる便利なジェネレーター
CSS Button Generatorで好みのデザインをする。

Generatorを適当に触って好みのデザインができたら、下の方にスタイルシートのコードが完成しているので、それをコピーしてテキストエディターで編集しワードプレスのスタイルシートの一番下に付け足すという流れです。

スタイルシート（CSS）変更前

CSS Button GeneratorサイトでコピーしてきただけのCSS
これをコンタクトフォーム７ 送信ボタン用にカスタムします。

<style type="text/css">
.css_btn_class {
font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.css_btn_class:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
}.css_btn_class:active {
	position:relative;
	top:1px;
}
/* This css button was generated by css-button-generator.com */
</style>

スタイルシート（CSS）変更後

input[type="submit"] {
font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}
input[type="submit"]:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
}
input[type="submit"]:active {
	position:relative;
	top:1px;
}

「送信ボタンの上にマウス（カーソル）が載ったとき」の装飾は、hover疑似クラスで記述。hover疑似クラスを使ってカラーが変化するうような効果が出せるテクニックも使ってある。

コンタクトフォーム７ 送信ボタン デザイン サンプルCSS

このサイトで使っているデザインは以下のようになっています。
コピーしてスタイルシート(最下)に貼り付けるだけでOK！

/*------------------------------------------------------------
コンタクトフォーム７　送信ボタン　デザイン
-------------------------------------------------------------*/
input[type="submit"] {
font-size:14px;
font-family:Arial;
font-weight:bold;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:1px solid #e284f3;
padding:3px 17px;
text-decoration:none;
background:-moz-linear-gradient( center top, #f1bdfa 17%, #da80ea 88% );
background:-ms-linear-gradient( top, #f1bdfa 17%, #da80ea 88% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1bdfa', endColorstr='#da80ea');
background:-webkit-gradient( linear, left top, left bottom, color-stop(17%, #f1bdfa), color-stop(88%, #da80ea) );
background-color:#f1bdfa;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b952cc;
-webkit-box-shadow:inset 1px 1px 0px 0px #f6dcfb;
-moz-box-shadow:inset 1px 1px 0px 0px #f6dcfb;
box-shadow:inset 1px 1px 0px 0px #f6dcfb;
}

input[type="submit"]:hover {
background:-moz-linear-gradient( center top, #da80ea 17%, #f1bdfa 88% );
background:-ms-linear-gradient( top, #da80ea 17%, #f1bdfa 88% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#da80ea', endColorstr='#f1bdfa');
background:-webkit-gradient( linear, left top, left bottom, color-stop(17%, #da80ea), color-stop(88%, #f1bdfa) );
background-color:#da80ea;
}

input[type="submit"]:active {
position:relative;
top:1px;
}

以上、最後まで読んで頂きありがとうございました。