Remove the complete styling of an HTML button/submit

html

responsive-design

best-practices

accessibility

byNikita Barsukov·Mar 4, 2025

Let's deploy the CSS power to strip all the default styles from HTML button using appearance: none; and setting border, background, padding, margin, and outline to 0:

button {
    /* Who needs defaults anyway? */
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
    /* Just inherit whatever the parent wants, it's easier */
    font: inherit;
    color: inherit;
    /* You're a button, act like one */
    cursor: pointer;
}

And voila! We have a blank canvas - a barebones button.

Special instructions for Internet Explorer (IE)

News Flash: IE has oddball ways of messing with styled buttons. Let's tackle them one-by-one:

Stopping the button content shifting on click

IE applies an annoying mousedown effect by default. Let's turn that off:

/* removing the inner-border in firefox and IE */
button::-moz-focus-inner,
button::-ms-expand {
    /* And stay out! */
    display: none;
}

button:active, 
button:focus {
    /* Accessibility is the new orange */
    outline: orange auto; 
}

Eliminating odd button saddening

/* Preventing IE's button overflow issues */
button {
    overflow: visible; 
}

Waving goodbye to hover and focus defaults

/* Giving user interaction its special light */
button:hover,
button:focus {
    background-color: lightgray; 
}

This code keeps the visual identity consistent across browsers.

How to handle sprites

Sprites can move your button around in IE. Fix this by keeping the button's size stable:

/* No pixel left behind */
button {
    background-image: url('button-sprite.png');
    background-repeat: no-repeat;
    text-indent: -9999px;
}

Reset with Bootstrap 4

If you're leveraging the power of Bootstrap 4, apply these classes:

/* The naked truth of Bootstrap 4 */
button {
    background: none;
    border: 0;
    padding: 0;
}

Retain focus

/* 'Cause we all love a bit of attention */
button:focus {
    outline: orange auto;
}

Note: Check the compatibility of every style you used on caniuse.com.

Perfect, now it's just buttons

Know how to reset a button to bare bones? Now, let's proceed on making it catch eyes!

Precious resets

When resetting, remember don't use all: unset;, it’s a Pandora's Box and isn't supported in IE.

Stay usable

Accessibility is not optional. Make sure your button remains usable after revolutionizing its looks.

Make it adaptable

Finally, ensure your styling responds and adapts to various devices and screens. Consistency delivers professional experience across platforms.

explain-codes / Html / Remove the complete styling of an HTML button/submit

Linked

Preventing an image from being draggable or selectable without using JS



Remove outline from select box in FF



Placing border inside of div and not on its edge



Change cursor to hand when a mouse hovers over a table row



Html/css: Make a div "invisible" to clicks?



How to make HTML Text unselectable



How to Background a Div Without the Padding Area



Special instructions for Internet Explorer (IE)How to handle sprites Perfect, now it's just buttons Make it adaptable