Remove border from buttons

html

css

button

accessibility

byAlex Kataev·Aug 14, 2024

To get rid of button borders, quickly use the following CSS:

button { 
    /* Who needs a border? */
    border: none; 
    /* Padding? Not today! */
    padding: 0; 
    /* And farewell, background */
    background: none; 
}

This code sets border, padding and background to none, getting rid of the button's default styling and giving you a blank canvas to work with.

More customization options

To eliminate outline upon button focus, without cutting any corners, use:

button:focus { 
    /* Outline? Never heard of her. */
    outline: none; 
}

Need to remove border inline with HTML? This is your ticket:

<input type="button" style="border: none;">

Casting a wider net? Target the input type itself with CSS:

input[type="button"] { 
    /* No border, no outline, no problems */
    border: none;
    outline: none;
}

Activating Hard Mode with complex button styles? Wrap that button in a <div> for styling flexibility.

Mastering custom image buttons

Integrating custom images into buttons? Great. Unexpected borders and effects? Not so much. To make sure nothing interferes with your perfect button design:

button {
    /* Padding? We don't know her. */
    padding: 0;
    /* Getting *border*line annoyed with the borders? Gone. */
    border: none;
    /* Backgrounds are so last season. */
    background: transparent;
    /* Who needs an outline when you're this stylish? */
    outline: none;
}

The result? Your custom image, standing proudly on its own, sans any unwanted border noise.

Visualising buttons and borders

Let's hit the drawing board to understand the concept better:

Default Button:      No Border:
|============|       |  Click!  |   
|   Click!   |   
|============|

Removing the border on a button is like a magic trick; now you see it, now you don't.

Not forgetting accessibility

While it's cool to be minimalist in design, we shouldn't forget about accessibility:

button {
    /* Enough room for even a cat to sit */
    padding: 10px 20px;
    /* Because white is the new black */
    color: #FFF;
    /* A pinch of contrast for a better UX */
    background-color: #007BFF;
}

To avoid making your button an invisible man for keyboard users, maintain a visible outline upon focus:

button:focus {
    /* Blue halo because… why not? */
    box-shadow: 0 0 0 3px rgba(0,123,255,.5);
}

Adding that special sauce

Sometimes, you need to go above and beyond just removing borders; here's a cheat sheet:

Want truly no background? Use background: transparent;.

Using :hover and :active pseudo-classes can create engaging interactions without resorting to borders:

button:hover {
    /* Just a hint of a shadow. Sneaky */
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}

button:active {
    /* Pressed! Oh no, is it stuck? */
    box-shadow: 0 0 3px rgba(0,0,0,.5) inset;
}

For advanced visual effects, consider ::before and ::after pseudo-elements to enhance your button while keeping the core clean.
As always, test test test your button styles across all devices and browsers.