Remove border from buttons

user_1461331 0
Viewed 478715

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.

button css html
13 Answers
input[type="button"] {
border: none;
outline:none;
}
user_93614970

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

user_156939220

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

user_19044790

Add this as css,

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

Just use: button{border:none; outline:none;}

user_151205020

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

 div button {
    border: none;
 }
user_102868670 
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
user_108332940
Related