Remove Border from Buttons

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.change {background-color: #F88F00;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.change:hover {cursor: pointer;background-color: #F89900;}
button:active {outline: none;border: none;}
button:focus {outline:0;}
<button class="launch">Launch with these ads</button> <button class="change">Change</button>

Remove border from buttons CSS?

According to the inspector, you get that from the padding of .site-footer .btn
Include this CSS in your code.

.site-footer .btn {
padding: 0;
}

How to remove the button border in css?

Just add border: none to the:

.design2-statusMonitor .list-group-item.selected {
border: none;
}

Updated fiddle

But a better solution would be something like this:

.design2-statusMonitor .list-group-item.selected {
border-top: none;
border-right-color: #2f749a;
border-bottom: none;
border-left-color: #2f749a;
}

.design2-statusMonitor .list-group-item.selected:hover {
border-right-color: #c0d5e0;
border-left-color: #c0d5e0;
}

Just to avoid affecting the width.

Updated fiddle



Related Topics



Leave a reply



Submit