216

Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok.

But when I click the button, it moves to the top a little, it makes it look out of shape. Is there a css click state, or mousedown? I don't know what triggers that state.

I know it's not a really big deal, but sometimes it's the small things that matter.

7 Answers 7

268

I think this provides a more thorough approach:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button>Example</button>

13
  • 2
    I don't think background has a 'none' - and the !important is no good. Jan 25, 2018 at 5:46
  • 4
    Usually, when you're doing this you want to override existing styles that exist for a button. It's rare that you want to do this with clean, unstyled HTML, hence the use of !important. That said I've removed it as it's a situation decision. background: none is entirely valid: stackoverflow.com/questions/20784292/… Feb 6, 2018 at 16:39
  • To each their own regarding !important. I don't think I could work on a project where I was forced to use it. RE: 'none' Here's a reference that is better than a SO post. When you use 'background' by itself, you are really using shorthand and clobbering all the attributes. Feb 8, 2018 at 4:05
  • I was driving myself nuts over the difference between styling an image and some text inside a button and having it look the same as it does outside a <button/>...in my case, font: inherit; did the trick. Thank you!
    – Kate
    Jul 19, 2018 at 19:52
  • 5
    I think for accessibility purposes you probably want to leave that outline there. otherwise when you tab over it there is no visual cue where you are. great answer though! Nov 1, 2018 at 20:37
166

Your question says "Internet Explorer," but for those interested in other browsers, you can now use all: unset on buttons to unstyle them.

It doesn't work in IE, but it's well-supported everywhere else.

https://caniuse.com/css-all

Accessibility warning: For the sake of users who aren't using a mouse pointer, be sure to re-add some :focus styling, e.g. button:focus { outline: orange auto 5px } for keyboard accessibility. If you're feeling lazy, you can button:focus { outline: revert } to revert the outline to the browser's default. https://caniuse.com/css-revert-value

(And, I hope this goes without saying, but be sure to add back some kind of styling so your button actually looks like a button, and preferably some :hover styling, too. If your button doesn't have a border, consider cursor: pointer as well.)

button {
  all: unset;
}

button:focus {
  outline: revert;
}
<button>check it out</button>

6
  • 1
    Thank you for this! Mar 21, 2019 at 11:24
  • 1
    This is not advisable for accessibility reasons. You'll need to add back all of the outline styles for the :focus element state, for instance.
    – Devin
    Mar 3, 2020 at 17:23
  • 1
    @Devin Great point! I updated my post with a suggestion to re-add an outline style. (But I don't think there's anything else that we need to re-add for a11y purposes. Do you know of anything?) Mar 3, 2020 at 18:31
  • 1
    Old Safari color warning: Setting the text color of the button after using all: unset can fail in Safari 13.1, due to a bug in WebKit. (The bug is fixed in Safari 14 and up.) "all: unset is setting -webkit-text-fill-color to black, and that overrides color." If you need to set text color after using all: unset, be sure to set both the color and the -webkit-text-fill-color to the same color. Dec 21, 2021 at 6:26
  • 1
    Using "outline: revert" is a cleaner solution than manually setting the button:focus style (though it won't work if you need to support really old browsers) Jun 30 at 20:15
88

I'm assuming that when you say 'click the button, it moves to the top a little' you're talking about the mouse down click state for the button, and that when you release the mouse click, it returns to its normal state? And that you're disabling the default rendering of the button by using:

input, button, submit { border:none; } 

If so..

Personally, I've found that you can't actually stop/override/disable this IE native action, which led me to change my markup a little to allow for this movement and not affect the overall look of the button for the various states.

This is my final mark-up:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

0
14

In bootstrap 4 is easiest. You can use the classes: bg-transparent and border-0

1
  • 2
    + shadow-none for me and it's sufficient. Thx!
    – Bachet
    Oct 3, 2019 at 14:16
12

Add simple style to your button

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
1
  • this is the answer I was hoping to find, I've always used (all: unset) but it removes the styling of any directive in angular. This one does the real job of removing only the styling. That's why I prefer this answer Aug 21 at 23:16
11

Try removing the border from your button:

input, button, submit
{
  border:none;
}
-1

I think it's the button "active" state.

2
  • It has to be the active state, you are right +1 for that. But i did not get it to work properly Mar 17, 2010 at 18:10
  • 3
    "I think" is not an answer.
    – shinzou
    Nov 13, 2018 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.