Submit button has bevel I cant get rid of

Question

I am trying to get rid of the default bevel and border that most browsers/OS have set as the default on Submit buttons. When I use CSS to add a background image it just displays the image in the background of the button but the bevel is still there. Is there a way to make the button just display just my image? Is the only way to do that to set the image path in the src tag of the html input element?

Answer 1

You will need to remove the border (bevel) like so:

input {
    border: 0;
}

Answer 2

You can set border attributes in CSS. I always think

  border: 1px solid black;

looks nice.

Answer 3

I would not recommend changing the appearance of the button because it will not be consistent with the way other buttons on websites look and will be harder for users to find and recognize as a submit button. If you really want to go ahead, I strongly recommend doing a usability test.

Answer 4

If you want to use your own button image, then you will need to define your own buttons, like this:

<div class="button">
  <a href="#">Login</a>
</div>

And the CSS:

div.button
{
    position: relative;
    display: block;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    background: url(button_right_normal.gif) no-repeat right top;
}

div.button a
{
    position: relative;
    display: block;
    margin: 0;
    border: 0;
    padding: 2px 15px 5px 15px;
    height: 18px;
    background: url(button_left_normal.gif) no-repeat left top;
    color: #ffffff;
    font-size: 11px;
    text-decoration: none;
}

Answer 5

You can remove the border using the border CSS properties. For example:

<input type=button value="Hello" style="border:0">

(You can of course move this into your stylesheet.)

Answer 6

You can something like the following to a stylesheet (or within at <style>...</style> tag on the page) and use some advanced CSS selectors:

input[type=submit], input[type=button], /* Advanced CSS selectors */
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */
{
  border: 0;
  background-image: url("/images/foo.png");
}

Answer 7

Holy Answer Festival! Thanks guys that did it! Set the border to 0 and it worked.

Answer 8

Note that Safari is very stubborn with styling submit buttons.

<button type="submit"></button>

Is more flexible. However, if you're using multiple buttons in a form, IE6 has problems. IE also submits the innerHTML of the button element, whilst Firefox submits the value attribute (which makes more sense to me).

Answer 9

i think you can specify how the button and submit button look like:

input[type=button], input[type=submit] { border: 0 }