0

i want to know how to use css with html forms

i have css button

<style>
a.btn {
    display: block; width: 120px; height: 18px; padding: 18px 0 0 0; margin: 0 auto;

    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;

    font: bold 20px/01px Helvetica, Sans-Serif; text-align: center;
    text-transform: uppercase; text-decoration: none;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #b4d1ad;

    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

    a.btn:hover {
        color: #145675;

        -moz-transition: color 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
    }
</style>

<a href="#" class="btn">Push</a>

i want to use this button is form search button
i tried
<input type="submit" class="btn" name="submit" value="search" />

but it can not work

Edited by nova37

3
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by nova37
0

That is because your class btn has been assigned to a (link) in your css and a submit button isn't a link. Just remove the a from a.btn in your stylesheet and that should work.

0

If you wanted the css to just apply to the submit button you could change your css to be:

input[type=submit].btn{

This will apply the css to any submit buttons that use the class "btn" rather than just links that use the clas btn.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.