Remove the complete styling of an HTML button/submit

Question

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.

score 263 · Answer 1 · edited Oct 22 '18 at 15:35

263

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>

edited Oct 22 '18 at 15:35

Flimm

136,138
45
251
267

answered Aug 26 '17 at 00:22

Kevinleary.net

8,851
3
54
46

2

I don't think background has a 'none' - and the !important is no good. – sheriffderek Jan 25 '18 at 05: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: https://stackoverflow.com/questions/20784292/backgroundnone-vs-backgroundtransparent – Kevinleary.net Feb 06 '18 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. – sheriffderek Feb 08 '18 at 04: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 ``...in my case, `font: inherit;` did the trick. Thank you! – Kate Jul 19 '18 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! – John Hooper Nov 01 '18 at 20:37
For those who want to inherit the text alignment, please add `text-align: inherit;` – SandroMarques Jun 19 '19 at 15:31
beware the using of `type` and `attribute` in reset.css, the type and attribute's declaration [has precedence over class' declaration](https://www.google.com/search?client=firefox-b-e&q=css+selector+specificity). Specificity is ranked uisng the sum of all the specificity factor. – Webwoman Apr 06 '20 at 18:38
Been here 50+ times. – Andre Zimpel Aug 21 '20 at 12:12
This is incredible: `{ all: initial; font: inherit; color: inherit; }` – PestoP Sep 10 '21 at 11:55
Also `text-align: left` – hb20007 Sep 16 '21 at 14:14
Also `border-radius: 0` (especially for iOS) – maxime schoeni Oct 03 '21 at 11:53
I found out `user-select: inherit` is also useful to allow copy&paste (when I want to list all properties instead of `all: unset` to keep the default focus outline) – Aprillion Apr 09 '22 at 13:46
`line-height: inherit` + `letter-spacing: inherit` – wokalek Jun 12 '23 at 23:36

Dan Fabulich · Answer 2 · 2023-08-17T02:55:55.643

158

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>

edited Aug 17 '23 at 02:55

answered Jan 08 '19 at 23:51

Dan Fabulich

37,506
41
139
175

1

Thank you for this! – Will Ediger Mar 21 '19 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 03 '20 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?) – Dan Fabulich Mar 03 '20 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](https://bugs.webkit.org/show_bug.cgi?id=158782). (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. – Dan Fabulich Dec 21 '21 at 06: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) – Alex von Brandenfels Jun 30 '23 at 20:15
@AlexvonBrandenfels Good idea! I've updated my answer. – Dan Fabulich Jul 11 '23 at 03:12

Darren Shewry · Accepted Answer · 2018-11-05T15:50:01.553

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>

score 14 · Answer 4 · answered Dec 17 '18 at 09:28

14

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

answered Dec 17 '18 at 09:28

ValRob

2,584
7
32
40

2

+ `shadow-none` for me and it's sufficient. Thx! – Bachet Oct 03 '19 at 14:16

score 11 · Answer 5 · answered Mar 17 '10 at 05:40

11

Try removing the border from your button:

input, button, submit
{
  border:none;
}

answered Mar 17 '10 at 05:40

Sarfraz

377,238
77
533
578

score 11 · Answer 6 · edited Sep 24 '20 at 05:50

11

Add simple style to your button

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

edited Sep 24 '20 at 05:50

Tasos K.

7,979
7
39
63

answered Sep 24 '20 at 04:51

SouMitya chauhan

281
2
5

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 – Binary_Hits00 Aug 21 '23 at 23:16

score -1 · Answer 7 · edited Oct 09 '16 at 08:32

-1

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

edited Oct 09 '16 at 08:32

A.H.

63,967
15
92
126

answered Mar 17 '10 at 05:41

Midhat

17,454
22
87
114

It has to be the active state, you are right +1 for that. But i did not get it to work properly – Saif Bechan Mar 17 '10 at 18:10
3

"I think" is not an answer. – shinzou Nov 13 '18 at 16:07

Remove the complete styling of an HTML button/submit

7 Answers7

Linked