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.

Try `-webkit-appearance: inherit;` or `-webkit-appearance:initial` — Max, Jun 27 '18 at 23:47
@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. — Michael Scheper, Jan 30 '19 at 23:01

Vestride · Answer 1 · 2017-07-14T05:02:24.547

279

Add

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

to your buttons.

Demo:

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

edited Jul 14 '17 at 05:02

answered Jul 16 '12 at 01:27

Vestride

3,410
1
17
18

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? – JamesonW Jul 16 '12 at 01:42
I added a fiddle plus `background: none;` to the buttons. Take a peak at the fiddle and see if that works for you. – Vestride Jul 17 '12 at 02:30

score 68 · Answer 2 · answered Jan 04 '16 at 05:31

68

This seems to work for me perfectly.

button:focus { outline: none; }

answered Jan 04 '16 at 05:31

centralhubb.com

2,705
19
17

9

`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. http://outlinenone.com/ – Vestride Jan 30 '17 at 22:33
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. – Octopus Sep 27 '20 at 22:46
1

@Octopus 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. – Hamish Lawson Sep 19 '21 at 22:18
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. – centralhubb.com Oct 26 '21 at 04:27
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. – centralhubb.com Oct 26 '21 at 04:30
This link is a fine example of when you might want to remove outlines from your html elements - https://toivjon.github.io/html5-space-invaders/ – centralhubb.com Oct 26 '21 at 04:39
Here are some more links for you to look at for examples of websites with outlines removed. https://www.skylinefilms.tv/ - https://thebearandhisscarf.com/ - https://longshotfeatures.com/ – centralhubb.com Oct 26 '21 at 04:47

score 17 · Answer 3 · answered May 04 '13 at 16:08

17

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>

answered May 04 '13 at 16:08

Flea

11,176
6
72
83

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. – DrCord Dec 15 '15 at 17:30

score 12 · Answer 4 · answered Oct 01 '20 at 00:13

12

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

answered Oct 01 '20 at 00:13

Marco Raganelli

123
1
5

Matin · Answer 5 · 2022-09-17T15:39:09.747

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

score 6 · Answer 6 · answered Feb 27 '20 at 15:09

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

answered Feb 27 '20 at 15:09

Kailas

7,350
3
47
63

score 4 · Answer 7 · answered Jul 16 '12 at 01:27

4

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

answered Jul 16 '12 at 01:27

Filipe Manuel

967
2
14
33

1

#button { border: none; } This seems to work just fine. – Karim Shaloh Aug 23 '20 at 23:43

score 2 · Answer 8 · 2012-07-16T02:09:51.000

2

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

edited Jul 16 '12 at 02:09

answered Jul 16 '12 at 01:31

Also you can set background of button as images, instead using img tags – Jul 16 '12 at 01:33
Or do it in pure css. like `background:#555; font-weight:bold: color:#fff; padding:6px 8px;` – Jul 16 '12 at 01:35

score 2 · Answer 9 · answered Jun 04 '20 at 05:59

2

Add this as css,

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

answered Jun 04 '20 at 05:59

darth vader

501
8
11

score 2 · Answer 10 · edited Mar 08 '23 at 13:56

2

Just use:

CSS

button {
 border:none; 
 outline:none;
}

edited Mar 08 '23 at 13:56

Nagama Inamdar

2,851
22
39
48

answered Jun 13 '21 at 11:05

Lakshya Chopra

49
1
3

1

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... – Sven Eberth Jun 13 '21 at 13:15

score 1 · Answer 11 · answered Jul 16 '12 at 01:30

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.

score 1 · Answer 12 · answered Apr 11 '21 at 00:35

1

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

 div button {
    border: none;
 }

answered Apr 11 '21 at 00:35

user10286867

11
1

score -5 · Answer 13 · edited Aug 06 '21 at 09:19

-5

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

edited Aug 06 '21 at 09:19

Audwin Oyong

2,247
3
15
32

answered Mar 06 '19 at 19:40

KenDev

1
2

The person is asking for a css code not a jQuery code. – MJ DLS Jan 07 '22 at 03:53

Remove border from buttons

13 Answers13

Linked

Related