[html] Remove border from buttons

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.

Add this as css,

button[type=submit]{border:none;}

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>

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 :)

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.

$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);

This seems to work for me perfectly.

button:focus { outline: none; }

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

Add

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

to your buttons.

Demo:

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

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

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