Problem
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
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
Answered by Vestride
Solution #2
This appears to be ideal for me.
button:focus { outline: none; }
Answered by centralhubb.com
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="" />
</div>
Answered by Flea
Solution #4
input[type="button"] {
border: none;
outline: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
button.new-button:focus {
outline: none;
}
I hope this information is useful:)
Answered by Kailas
Post is based on https://stackoverflow.com/questions/11497094/remove-border-from-buttons