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?
11 Answers
You can set border attributes in CSS. I always think
border: 1px solid black;
looks nice.
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.
-
Upvoted, in response to good advice regarding UI. Not, I accept, answering the question, but definitely worthwhile advice. May 13, 2009 at 0:00
-
+1 from me too, I should mention. It's a valid point. But sometimes clients just don't budge.– alexMay 13, 2009 at 1:29
-
2You 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. Dec 24, 2015 at 0:09
-
You should totally change the look of buttons. Default browser styling is ugly. You don't need a usability test. Dec 16, 2016 at 0:03
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;
}
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.)
You can use ANY img as background(for example transparent rounded corners), just in the css add "background-color: transparent;"
HTML(standard offical "submit" button) - nothing special(I don't like mixing code with style):
<input type="submit" name="submit" id="mystyle" value="send e-mail"/>
then in css(same as a normal link except kill borders, and default background)
#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Without CSS like the offical submit button, with CSS whatever you designed.
Tested: Chrome, IE, Opera
I was having the same problem on input buttons. For once IE8 was appearing like I wanted "out-of-the-box" and it was Chrome that disappointed!
The CSS that did the trick for me was:
input[type="button"] {
border: 0;
border-width: 2px;
border-color: white;
border-style: solid;
}
border: 0; removes the 3D bevel (border style), then I replace it with a flat looking border which renders nicely in both IE8 and Chrome.
I was looking for the answer, saw this and decided to weigh in after I figured out the fix. All the answers below are correct and helpful up to the point that a small grey border is still visible.
No one mentioned: background-size: cover;
Which removed the final bit of grey from the button.
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");
}
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).
i think you can specify how the button and submit button look like:
input[type=button], input[type=submit] { border: 0 }