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

Add

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

to your buttons.

Demo:

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

Answer 2

This seems to work for me perfectly.

button:focus { outline: none; }

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

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

Answer 5

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....

Answer 6

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

Answer 7

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

Answer 8

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 9

Add this as css,

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

Answer 10

Just use:

CSS

button {
 border:none; 
 outline:none;
}

Answer 11

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 12

You can target the button in the CSS styling like so:

 div button {
    border: none;
 }

Answer 13

HTML code: Then, you can style the link to look like a button.

<button class=”button-solid”>Button without border</button>

CSS code: You might find that your button does not have a border. But when clicked, a border appears on the button. You can remove that border by applying the following CSS code on the button.

.button-solid {
    border: none;
}
button-solid:focus {
    border: none;
    outline: none;
}

Answer 14

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