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?

Solution 1

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

input {
    border: 0;
}

Solution 2

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.

Solution 3

You can set border attributes in CSS. I always think

  border: 1px solid black;

looks nice.

Solution 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;
}

Solution 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.)

View more solutions

Comments

[Sikshya Maharjan]

Upvoted, in response to good advice regarding UI. Not, I accept, answering the question, but definitely worthwhile advice.

[user3167101]

+1 from me too, I should mention. It's a valid point. But sometimes clients just don't budge.

[Tony Topper]

You do need to be careful of course. But a blanket recommendation against changing the appearance is not good advice in my opinion. And it doesn't answer the question.

[AliInvestor]

You should totally change the look of buttons. Default browser styling is ugly. You don't need a usability test.