CODEWITHSUNDEEP
htmlcssinternet-explorerbuttonstate
Saif Bechan
Saif Bechan

Reputation: 17121

Remove the complete styling of an HTML button/submit

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.

Upvotes: 235

Views: 609754

Answers (7)

Dan Fabulich
Dan Fabulich

Reputation: 39563

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>

Upvotes: 187

SouMitya chauhan
SouMitya chauhan

Reputation: 331

Add simple style to your button

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

Upvotes: 15

ValRob
ValRob

Reputation: 2682

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

Upvotes: 15

Darren Shewry
Darren Shewry

Reputation: 10410

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>

Upvotes: 88

Kevinleary.net
Kevinleary.net

Reputation: 9670

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>

Upvotes: 300

Midhat
Midhat

Reputation: 17810

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

Upvotes: -1

Sarfraz
Sarfraz

Reputation: 382696

Try removing the border from your button:

input, button, submit
{
  border:none;
}

Upvotes: 11

Related Questions