HTML - Styling a Form Button

Question

I'm trying to style my submit button for my form. I was looking into the 'button' tag, and adding in my CSS style, but the button still has a horrible default style.

This is what I have so far:

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button">
Increase
</button>

My css style is working, but I also get a nasty looking border and background colour. I was looking into JavaScript too, but I don't like the idea that not all browsers have JS active.

Below is an image of the button, the top one is what it looks like, the bottom one is what its suppose to look like:

Here is my CSS:

#visit_return_button{
    width:90px;
    height:30px;
    position:absolute;
    background-image: url(image/build_button.png);
    background-repeat: no-repeat;
    /*font-family: Tahoma, Geneva, sans-serif;*/
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    /*margin: auto;*/
    padding-top: 10px;
    margin-top:-20px;
}

Would appreciate any help, thanks

Answer 1

Either try to hide the border like border:0; and adjust the background to fit your needs or do not use a background image and try to do it with pure css and border-radius which seems to be a better idea. See http://jsfiddle.net/qVkRs/1/