5

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:

enter image description here

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

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

7 Answers7

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/

worenga
  • 5,776
  • 2
  • 28
  • 50
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!

Ricketts
  • 5,025
  • 4
  • 35
  • 48
0

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.

Hawken
  • 2,059
  • 19
  • 34
  • Why is `input type="button"` better than `button`? – Mr Lister Apr 15 '12 at 18:30
  • @mrlister Because it is consistent with every other input method in a form; also it is more concise. The `` tags are meant for a button encompassing other html elements. See: http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use – Hawken Apr 15 '12 at 18:36
  • I'll give you more concise and no HTML. But not all controls are `input` elements; think of textareas, selects, links... – Mr Lister Apr 15 '12 at 18:43
0

Just hide the borders of the button and set background color

background:#ffffff url('your_image.png');
Nidis
  • 71
  • 2
0

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;*/
}
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

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/

Pradeep.K.K
  • 200
  • 1
  • 11
Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
-2

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.

Larry K
  • 47,808
  • 15
  • 87
  • 140