Remove border from buttons

Question

I tried to create buttons and insert my own images instead of the standard button images. However, the gray frame from the standard buttons still remains, showing on the outside of my black button images.

Does anyone know how to remove this gray frame from a button, so this is just an image? Thank.

Answer 1

Add

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

to your buttons.

Demo:

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

Answer 2

It seems to work fine for me.

 button:focus { outline: none; } 

Answer 3

I had the same problem, and even if I stylized my button in CSS, it would never pick up border:none , but what worked added the style directly to the input button like this:

 <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 a part of the link instead of the button. Then you bind the click event to the custom handler.

Frames like jQuery-UI or Bootstrap do this out of the box. Using one of them, you can easily weaken the concept of the entire application.

Answer 6

You can also try the buttons background:none;border:0px for the buttons.

also the css selector div#yes button{..} and div#no button{..} . hopes this helps

Answer 7

 $(".myButtonClass").attr("style","border:none; background-color:white; padding:0"); 

works great for my .xhtml pages.