I tried making a custom submit button for my simple contact form because I wanted to style it a bit with CSS. I set the input type to submit and whenever I click the button it neither submits nor is click able.
I created a class called blue button, and my style will show but cannot submit.
<a class="blue button" input type="submit">Everything? Send!</a>
I then tried this method instead and it submits, but it does not show my style that created!
<input class="blue button" type="submit" value="Send">
Form
<form method="post" id="submitform" action="submitemail.php" >
<input type="text"
class="formstyle"
title="Name"
data-placeholder="Name..."
name="name" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Website..."
name="website" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Email..."
name="email" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Business or Personal?"
name="type" />
<textarea name="message"
data-placeholder="Message..."
title="Message"></textarea>
Is there anyway to have a submit button from element styled button like below?
<a class="blue button" input type="submit">Everything? Send!</a>
CSS as requested:
.button.blue {
border: 1px solid #005998;
}
.button.blue .text {
padding: 16px 31px 14px;
text-transform: none;
text-shadow: 0 -1px 0 #022268;
}
.button.blue .normal {
background: linear-gradient(#00a7f7, #0563bb);
background: -webkit-linear-gradient(#00a7f7, #0563bb);
background: -moz-linear-gradient(#00a7f7, #0563bb);
background: -o-linear-gradient(#00a7f7, #0563bb);
background: -ms-linear-gradient(#00a7f7, #0563bb);
-pie-background: linear-gradient(#00a7f7, #0563bb);
box-shadow: 0 1px 0 #12dbff inset;
-webkit-box-shadow: 0 1px 0 #12dbff inset;
-moz-box-shadow: 0 1px 0 #12dbff inset;
-ms-box-shadow: 0 1px 0 #12dbff inset;
-o-box-shadow: 0 1px 0 #12dbff inset;
behavior: url(pie.htc);
}
.button.blue .hover {
display: none;
background: linear-gradient(#008af3, #0244a2);
background: -webkit-linear-gradient(#008af3, #0244a2);
background: -moz-linear-gradient(#008af3, #0244a2);
background: -o-linear-gradient(#008af3, #0244a2);
background: -ms-linear-gradient(#008af3, #0244a2);
-pie-background: linear-gradient(#008af3, #0244a2);
box-shadow: 0 1px 0 #12c4ff inset;
-webkit-box-shadow: 0 1px 0 #12c4ff inset;
-moz-box-shadow: 0 1px 0 #12c4ff inset;
-ms-box-shadow: 0 1px 0 #12c4ff inset;
-o-box-shadow: 0 1px 0 #12c4ff inset;
behavior: url(pie.htc);
}
This is totaly wrong. For form submit button: