Remove border from buttons

Question

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.

Answer 1

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

Answer 2

Add

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

to your buttons.

Demo:

https://jsfiddle.net/Vestride/dkr9b/

Answer 3

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>

Answer 4

Try using: border:0; or border:none;

Answer 5

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.

Answer 6

This seems to work for me perfectly.

button:focus { outline: none; }