html - Remove 3D push effect on a button

Question

I'm trying to remove all effects on a HTML Button element. The HTML:

<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>

The CSS:

#header #go button{
    display:block;
    border:0 none;
    cursor:pointer;
    outline:none;
    vertical-align:top;
    width:18px;
    height:33px;
    background:url('../images/cards/go.png'); //Just an image to replace it all.
}

In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset) Is there any Tricks i can use to remove this effect? Thanks in advance! Diesal.

Answer 1

you need to add background styles to :hover :active :focus as well.

#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}