Submit form button

Question

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

Answer 1

<a class="blue button" input type="submit">Everything? Send!</a>

This is totaly wrong. For form submit button:

<input type="submit" class="blue-button" value="submit" />

Answer 2

I dont know if you really understand the concept of css, either way here is what you can try:

1 - remove the .normal from the rules, its not used.

2 - put the input submit inside the form.

3 - order the class on css, like .blue.button not button.blue(jsut to organize)

4 - the .hover is a class or the effect? if its the effect the correct is :hover

try these

Answer 3

You may try something like;

<a class="blue_button" input type="submit"><input class="submit_button" type="submit" value="Send"></a>

and you may give submit_button a styling of display: block; width: 100%; height: 100px; margin: none; border: none;. I recommend giving it a width and height in px (fixed width). This is not tested.

Leaving space in defining class names to elements will treat them as multiple classes. For example, if you use class="blue button", it says that the element may get styling defined on .blue and .button.