How to remove the focus border of button when click? - html

Question

I am using the Bootstrap button, and I want that when I click on them the focus border should not come around the icons. The code is like below.
<div class="btn-group">
<button class="btn btn-link"> <img src="../images/icons/User.svg" class="svg"></button>
</div>

Answer 1

Use this style to avoid the focus border on items
button:focus {
outline: none;
}

Answer 2

Use outline:0; or outline:none; to remove the border on focus
Note: Use !important at the end of the rule to override the Bootstrap declarations
button:focus{
outline:0 !important;
}
or
button:focus{
outline:none !important;
}

Answer 3

Try It Once
button:focus{
outline:0px;
}
Also Use
button:focus{
outline:none !important;
}
I have to edit !important then it work fine.

Answer 4

On Bootstrap 4, "shadow-none" class was added that disables the effect.
Using JQuery you can disable the effect by adding the "shadow-none" class to the relevant buttons.
$(".btn-secondary").addClass("shadow-none");

Answer 5

Its either one or several of the following lines.
button {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
I don't think you will need the :focus part at all as the actual bootstrap button is never showing. I don't at least. And maybe try and leave the !important away in case it works without it.

Answer 6

Add following CSS property if none of them works -
box-shadow:none !important;

Answer 7

If you're using Bootstrap 4 add this class to the input or button tag
shadow-none

Answer 8

All previous answers all incorrect:
Please see below for the reason, I also added snippet at the bottom of my answer
/*incorrect*/
button:focus {
outline:none !important;
}
/*correct*/
.btn.btn-link:focus {
outline:none !important;
}
Please Learn more about CSS Selector about "class"
class ===> using .
id ===> using #
CSS Selectors ( Also About "class")
https://www.w3schools.com/css/css_selectors.asp
"class" Names Concatenated Or Separated By a Space
https://stackoverflow.com/questions/16858926/class-names-concatenated-or-separated-by-a-space
Please check below my example which run in snippet:
/*=============Button1===============*/
.button1 {
width: 50px;
height: 45px;
background-color: #c4891b;
background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
image-rendering: -webkit-optimize-contrast;
background-size: 50px;
background-repeat: no-repeat;
border: none;
transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button1:hover {
background-color: yellow;
transform: scale(1.1);
}
/*for removing the outline*/
.button1:focus {
outline: none;
}
/*=============Button1===============*/
.button2 {
width: 50px;
height: 45px;
background-color: #c4891b;
background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
image-rendering: -webkit-optimize-contrast;
background-size: 50px;
background-repeat: no-repeat;
border: none;
transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button2:hover {
background-color: yellow;
transform: scale(1.1);
}
<table border='1'>
<tr>
<td>
Button 1
<br>(onclick
<br>no outline)
</td>
<td>
Button 2
<br>(onclick
<br>outlined)
</td>
</tr>
<tr>
<td>
<button class='button1' id='' name='' value=''></button>
</td>
<td>
<button class='button2' id='' name='' value=''></button>
</td>
</tr>
<table>
<a href='https://github.com/dicka-ks'>My Github -> Dicka</a>
https://github.com/dicka-ks

Answer 9

It will work
.svg:focus {
border: none;
outline: none;
}