Remove 3D push effect on a button

Question

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

        
                      

              相关标签:
       
      

Answer 1

It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>

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

Answer 2

<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 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:

<a href="#" onclick="document.formName.submit();">Click Here</a>

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

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 5

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 6

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