Remove the complete styling of an HTML button/submit

HtmlCssInternet ExplorerButtonState

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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/#feat=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.

And don't forget cursor: pointer. all: unset removes all styling, including the cursor: pointer, which makes your mouse cursor look like a pointing hand when you hover over the button. You almost certainly want to bring that back.

button {
  all: unset;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Solution 3 - Html

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>

Solution 4 - Html

Try removing the border from your button:

input, button, submit
{
  border:none;
}

Solution 5 - Html

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

Solution 6 - Html

Add simple style to your button

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

Solution 7 - Html

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSaif BechanView Question on Stackoverflow
Solution 1 - HtmlKevin LearyView Answer on Stackoverflow
Solution 2 - HtmlDan FabulichView Answer on Stackoverflow
Solution 3 - HtmlDarren ShewryView Answer on Stackoverflow
Solution 4 - HtmlSarfrazView Answer on Stackoverflow
Solution 5 - HtmlValRobView Answer on Stackoverflow
Solution 6 - HtmlSouMitya chauhanView Answer on Stackoverflow
Solution 7 - HtmlMidhatView Answer on Stackoverflow