/* カスタム CSS をここに入力してください */

<!-- 緑の色変わるボタンのデザインここから -->


.btn-wrap{
margin:1.5em 0 2em;
}
.btn-wrap.aligncenter{
text-align:center;
}
.btn-wrap a{
font-weight:bold;
display:inline-block;
text-decoration:none;
padding:0.9em 2.3em;
background: #3cb371;
border:2px solid #3cb371;
-webkit-border-radius: 2px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 2px;   /* Firefox用 */
color:#fff;
}

.btn-wrap a:hover{
background:none;
border:2px solid #3cb371;
color:#3cb371;
font-weight:bold;
}
.btn-wrap.spe2 a {
	display:inline-block;
	text-decoration:none;
	padding:0.9em 2.3em;
	position: relative;
	z-index: 2;
	border: 2px solid #11930a;
	background-color:#11930a;
	text-align: center;
	outline: none;
}

.btn-wrap.spe2 a:hover {
	background-color: #fff;
	border-color: #eeee22;
	color: #eeee22;
	font-weight:bold;
}

.btn-wrap.spe2 a::before,
.btn-wrap.spe2 a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	left: 0;
	width: 100%;
	height: 50%;
	background-color:#11930a;
}
.btn-wrap.spe2 a::before {
	top: 0;
}
.btn-wrap.spe2 a::after {
	bottom: 0;
}
.btn-wrap.spe2 a:hover::before,
.btn-wrap.spe2 a:hover::after {
	height: 0;
	border-color: #eeee22;
	color: #eeee22;
}

.btn-wrap.spe2 a,
.btn-wrap.spe2 a::before,
.btn-wrap.spe2 a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	transition-delay:.1s;
}


<!-- 緑の色変わるボタンのデザインここまで -->