コンタクトフォーム７送信ボタンのデザインを可愛くカスタムする方法

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

Contents

1 CSS Button Generatorでボタンのデザインをする
2 スタイルシート（CSS）変更前
3 スタイルシート（CSS）変更後
4 コンタクトフォーム７送信ボタンデザインサンプルCSS

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_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;
}

input[type="submit"] {