how to use custom buttons in html forms

Question

I have some forms on my site but i hate the standard buttons on them.

I want to customise the buttons so i can have my own buttons that i have built myself instead.

i want a rollover effect as well.

the buttons i have designed are a blank gradient background button with no text on them.

i am happy to create a variation of the buttons that have the submit and reset text on them if that makes life easier but want to know how to use custom buttons to get the best look possible.

any help you can provide will be greatly appreciated.

Answer 1

You can override or customise the default button using css. You can apply the css by using class name or id or default button tag itslef.

Example:

Copy pase the below code between the head tag in your html page.

        <style type="text/css">
        .yourclass {
            -moz-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            -webkit-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
            background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380');
            background-color:#fae4bd;
            -webkit-border-top-left-radius:0px;
            -moz-border-radius-topleft:0px;
            border-top-left-radius:0px;
            -webkit-border-top-right-radius:0px;
            -moz-border-radius-topright:0px;
            border-top-right-radius:0px;
            -webkit-border-bottom-right-radius:0px;
            -moz-border-radius-bottomright:0px;
            border-bottom-right-radius:0px;
            -webkit-border-bottom-left-radius:0px;
            -moz-border-radius-bottomleft:0px;
            border-bottom-left-radius:0px;
            text-indent:0;
            border:1px solid #eeb44f;
            display:inline-block;
            color:#ffffff;
            font-family:Arial;
            font-size:15px;
            font-weight:bold;
            font-style:normal;
            height:40px;
            line-height:40px;
            width:100px;
            text-decoration:none;
            text-align:center;
            text-shadow:1px -21px 0px #cc9f52;
        }
        .yourclass:hover {
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eac380), color-stop(1, #fae4bd) );
            background:-moz-linear-gradient( center top, #eac380 5%, #fae4bd 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eac380', endColorstr='#fae4bd');
            background-color:#eac380;
        }.yourclass:active {
            position:relative;
            top:1px;
        }

        </style>

inside the body tag :

     <input type="submit" class="yourclass" name="mysubmit" value="Submit">

You can create your own in even in online - http://www.cssbuttongenerator.com/

Answer 2

Use CSS:

input[type=submit] {
    background: red;
    color: white;
    border: 0;
    cursor: pointer;
    text-indent: -9999px; /* or any other hide text CSS technique */
}
input[type=submit]:hover {
    background: green;
}

You can use the majority of CSS attributes here.