Remove 3D push effect on a button - html

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');
}

Answer 2

I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here:
http://jsfiddle.net/GmkVh/7/
HTML:
<button></button>
CSS:
button {
color:#fff;
background:#000;
border: none;
outline:none;
padding: 5px;
cursor: pointer;
height: 25px;
}
/*
It hits this state (at least in IE) as you're clicking it
To offset the 1px left and 1px top it adds, subtract 1 from each,
then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
padding-top: 4px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 6px;
color: #ccc;
}

Answer 3

One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.
Just have the link do a javascript postback.
update (from comments):
one example:
Click Here
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
There are alternate versions if you are using .net webforms or jQuery.

Answer 4

After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Answer 5

<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF

Answer 6

The following helped for me in IE 10:
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).

Answer 7

Position relative seemed to have taken care of the problem
Simply have a wrapper within the button:
So
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
Example below:
http://jsfiddle.net/eyeamaman/MkZz3/

Answer 8

It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
This is a duplicate question