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

Solution 1

You can easily make your button through CSS3 Border-Radius property:-

CSS

 #visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    }

HTML

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

demo:- http://jsfiddle.net/VY8xs/3/

Solution 2

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/

Solution 3

First you want to make a global style for your buttons, otherwise you will have to apply those styles to every single button id which will be a lot of repeated css. Then change your background styles to be like below. After that, you can adjust the rest to look correct.

input[type="button"], input[type="submit"], button
{
     background: none;
     background-image: url(image/build_button.png);
     background-position: center center;
     background-repeat: no-repeat;
     border: 0px;
     /* add the rest of your attributes here */
}

This will apply these styles to all buttons across the entire site. If you need to apply additional styles to a specific button or override some of the above, then use the id and place it below the above code. Also get rid of the class="" attribute on your button tag, you don't need it and it is not being used as far as we can see. Hope this helps. Good Luck!

Comments

[Hawken]

adding java-script just for a simple button is ridiculous

[Vitalii Petrychuk]

padding: 0; line-height: 30px;

[Mr Lister]

Why is input type="button" better than button?

[Hawken]

@mrlister Because it is consistent with every other input method in a form; also it is more concise. The <button></button> tags are meant for a button encompassing other html elements. See: stackoverflow.com/questions/469059/…

[Hawken]

the #ffffff is unnecessary by the way.

[Mr Lister]

I'll give you more concise and no HTML. But not all controls are input elements; think of textareas, selects, links...