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.

Gentlemanatarms

Try -webkit-appearance: inherit; or -webkit-appearance:initial – Brockbrocken

@Brut: I might be wrong, but that looks browser-specific to me, and I'm pretty sure Jameson wants something that'll work for all modern browsers. – Jemadar

In my case I was seeing the box-shadow – Catechu

Answer 1

Add

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

to your buttons.

Demo:

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

Chassis

I appreciate.. but i added just like you said to the stylesheet and it didn't work unfortunately. Should I just embed it straight into the html, if that would make a difference? – Gentlemanatarms

I added a fiddle plus background: none; to the buttons. Take a peak at the fiddle and see if that works for you. – Chassis

Answer 2

This seems to work for me perfectly.

button:focus { outline: none; }

Intact

outline:none; is not recommended for accessibility reasons. If you must remove the focus border, please provide another way for users to see that it has focus. outlinenone.com – Chassis

Another point of view to the previous comment is that buttons shouldn't necessarily hold focus. If you click it and an action is performed, then the focus should not remain. – Anthraquinone

@Anthraquinone If someone is not able to move a mouse pointer to click on a button directly, but instead needs to tab through the form controls to get to the button in question, then they will need some cue to know that they have reached the correct button before activating it. – Aleishaalejandra

Note: In general some websites tend to prefer outline visibility for all users to see especially for disabled users. However some websites prefer not to display outlines, it really depends on your website designs and your website audience. For example for an internal admin panel you can do what ever you like as you already know who your website users are and admin panels are private websites not public facing. – Intact

Also on highly graphical web pages sometimes items look better without outlines, like those story book websites out there, Im an sure we have all seen them similar to computer game designs. – Intact

This link is a fine example of when you might want to remove outlines from your html elements - toivjon.github.io/html5-space-invaders – Intact

Here are some more links for you to look at for examples of websites with outlines removed. skylinefilms.tv - thebearandhisscarf.com - longshotfeatures.com – Intact

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>

Zirconium

you are using the CSS cascade to override the property with a inline style. You should check out some articles on the CSS cascade and CSS specificity. – Troup

Answer 4

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

Redshank

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

Changsha

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

Dagenham

Answer 7

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

Deka

#button { border: none; } This seems to work just fine. – Imprisonment

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

Parthenope

Also you can set background of button as images, instead using img tags – Parthenope

Or do it in pure css. like background:#555; font-weight:bold: color:#fff; padding:6px 8px; – Parthenope

Answer 9

Add this as css,

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

Flintlock

Answer 10

Just use:

CSS

button {
 border:none; 
 outline:none;
}

Systematist

Welcome to StackOverflow. While your code snippet may answer the question, providing additional context regarding why and/or how your code snippet works improves its long-term value. Furthermore it doesn't seem to differ very much from the accepted answer... – Unplug

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.

Decortication

Answer 12

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

 div button {
    border: none;
 }

Comestible

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;
}

Suppletion

Answer 14

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

Portion

The person is asking for a css code not a jQuery code. – Libbi