HTML - 样式表单按钮

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/

Answer 2

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!

Answer 3

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.

Answer 4

只需隐藏按钮的边框并设置背景颜色即可

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

Answer 5

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.net/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;*/
}

Answer 6

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/

Answer 7

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.