javascript - HTML - Styling a Form Button - Stack Overflow

admin管理员组

文章数量:1279144

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

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

• javascript
• html
• css
• button
• styles

Share Improve this question Follow edited Apr 15, 2012 at 18:05 Oliver Jones asked Apr 15, 2012 at 17:55 Oliver JonesOliver Jones 1,45077 gold badges3131 silver badges4343 bronze badges 4

• 4 Could you tell us what browser you're using? Different browsers have different obstacles to overe when styling buttons. Also, "horrible" and "nasty" are not very good descriptions if not acpanied by screenshots. – Mr Lister Commented Apr 15, 2012 at 17:58
• I've updated my question, sorry about that. And I'm using chrome, it also does it in safari – Oliver Jones Commented Apr 15, 2012 at 18:06
• 1 Why are you padding the button and giving it a height? – j08691 Commented Apr 15, 2012 at 18:09
• can you provide build_button.png ? I'm testing out a solution. – Hawken Commented Apr 15, 2012 at 18:14

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 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/qVkRs/1/

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!

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/VY8xs/3/

Just hide the borders of the button and set background color

background:#ffffff url('your_image.png');

Here's my solution; I've tested with all the major browsers and it works fine, even without the background picture. Except IE8 doesn't do rounded corners.

http://jsfiddle/uSphG/3/

I added some style properties, just in case. Some features have different defaults on different browsers.

button::-moz-focus-inner {
 padding: 0 !important;
 border: none !important;
}

#visit_return_button{
 display:inline-block;
 width:90px;
 padding:0; margin:0; outline:0;
 background:#9B8C47;
 background-image: url(image/build_button.png);
 background-repeat: no-repeat;
 /*font-family: Tahoma, Geneva, sans-serif;*/
 border:1px solid #866517;
 -moz-border-radius:0.4em;
 border-radius:0.4em;
 font-size: 14px; line-height:24px;
 font-weight: normal;
 color: #FFF;
 text-align: center;
 /*margin: auto;*/
}

I think you're trying to remove the border. This can be done with:

border:none;

I took the liberty of tidying up the original CSS here:

#visit_return_button{
    width:90px;
    height:30px;
    font:14px Tahoma, Geneva, sans-serif;
    background:url(image/build_button.png) no-repeat;
    color:#fff;
    text-align:center;
    border:none; /* removal of border */
}

Also if this is a form, it is be better to use:

<input type="button" value="Increase"/>

for buttons; and:

<input type="submit" value="Increase"/>

for SUBMIT buttons specifically.

Libraries are often a good solution for styling buttons consistently across multiple browser types. Check out jQuery buttons, YUI Buttons, and there are many others as well.

本文标签： javascriptHTMLStyling a Form ButtonStack Overflow