CSS Buttons (w/ Background but need bevel)

Question

<input type="submit"

background: url(tick.png) bottom left no-repeat;
padding-left: 18px;

But the bevel goes away, how can I add an icon to submit button and keep the bevel?
Edit: I want it to look like the browser default.

Answer 1

Use border. For example:

INPUT.button {
    BORDER-RIGHT: #999999 1px solid;
    BORDER-TOP: #999999 1px solid;
    FONT-SIZE: 11px;
    BACKGROUND: url(tick.png) bottom left no-repeat;
    BORDER-LEFT: #999999 1px solid;
    CURSOR: pointer;
    COLOR: #333333;
    BORDER-BOTTOM: #999999 1px solid
}

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

Answer 2

You could use border-style outset:

border: 2px outset #cccccc;

Answer 3

For a true button effect, I also like to introduce a hover or a focus style. Similar to what @Roburg has mentioned, I normally do something like:

input#button {
    border: 2px outset rgb(0, 0, 0);
}

input#button:focus {
    border: 2px inset rgb(0, 0, 0);
}

This will give the illusion that the button has been pressed even though it isn't a true button, per se.

Answer 4

Why not use the html < button > element instead ? Much more easy to style.

Answer 5

My old shop used to rock the input type="image" syntax - it works as Submit. As one of my favorite poker people likes to say, "all you can eat, baby!" - anything you want to put there as a graphic.

Answer 6

Using <.input type="submit" /> with a background will look different depending on what browser / OS you're on.

If you want to keep the browser styles, you could use the button element, which allows HTML inside the tag:

<button type="submit"><img src="image.gif" /> Text</button>
or 
<button type="submit"><span class="icon"></span> Text</button>