Bootstrap: active btn-link does not look like a link

[bembelimen]

Hello,

if you click on a Element with the class "btn btn-link" the btn gets an button border when active.

Perhaps here should be something to prevent this (and stick to the description):
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

[cr101]

@bembelimen Bug reports must include a live demo of the problem. Per the contributing guidelines, please create a reduced test case via JS Bin or CodePen and report back with your link, Bootstrap version, and specific browser and OS details.

[alecpl]

@cr101, it's obvious. Goto https://v4-alpha.getbootstrap.com/components/buttons/#examples and click on "Link" button.

[wendt88]

you can fix it, by removing the "btn" class, but so you have the default user agent border width

[Varunram]

Small update, Can't reproduce on Safari, but issue is present on Chrome.
EDIT: I think this has to do more with how Chrome treats buttons rather than bootstrap itself.

[joshterrill]

I do see a style being applied to it on

.btn.focus, .btn:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(2,117,216,.25);
    box-shadow: 0 0 0 2px rgba(2,117,216,.25);
}

And similarly on the other types of buttons

.btn-danger:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(217,83,79,.5);
    box-shadow: 0 0 0 2px rgba(217,83,79,.5);
}

So I don't know if that's necessarily a chrome thing.

When looking at it in Safari, clicking it does not look like it triggers the :focus state. You can inspect it and manually trigger it through the styles inspector, and you see similar behavior with the blue outline.

[patrickhlauke]

Fixed. Good catch.