Coder Perfect

Button borders should be removed.


Instead of using the normal button graphics, I attempted to make my own buttons and insert my own images. The gray border from the regular buttons, on the other hand, is still visible on the outside of my black button images.

Is there a way to remove the gray border from the button so that it’s just the image? Thank you very much.

Asked by JamesonW

Solution #1


padding: 0;
border: none;
background: none;

to your buttons.


Answered by Vestride

Solution #2

This appears to be ideal for me.

button:focus { outline: none; }

Answered by

Solution #3

I was having the same issue, and no matter how much CSS I used to style my button, it would never pick up the border: None of them worked, however adding a style to the input button directly helped:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />

Answered by Flea

Solution #4

input[type="button"] {
border: none;

Answered by Marco Raganelli

Solution #5

To remove the default ‘blue-border’ from a button when it is focused, use the following code:

In Html:

<button class="new-button">New Button...</button>

And in Css {
    outline: none;

I hope this information is useful:)

Answered by Kailas

Post is based on