Remove border from buttons
HtmlCssButtonHtml Problem Overview
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Html Solutions
Solution 1 - Html
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
Solution 2 - Html
This seems to work for me perfectly.
button:focus { outline: none; }
Solution 3 - Html
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none
but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
Solution 4 - Html
input[type="button"] {
border: none;
outline:none;
}
Solution 5 - Html
you can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
the border: none;
will also do the job for you separately without giving outline (because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none
, then it prevents your button having any color, image and etc....
Solution 6 - Html
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Solution 7 - Html
Try using: border:0;
or border:none;
Solution 8 - Html
You can also try background:none;border:0px
to buttons.
also the css selectors are div#yes button{..}
and div#no button{..}
. hopes it helps
Solution 9 - Html
Add this as css,
button[type=submit]{border:none;}
Solution 10 - Html
Just use:
button{border:none; outline:none;}
Solution 11 - Html
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
Solution 12 - Html
You can target the button in the CSS styling like so:
div button {
border: none;
}
Solution 13 - Html
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);