.btn-link has border-color: transparent why?

[719media]

I've looked for the reasoning behind adding border-color: transparent to the :hover and :focus states of .btn-link

bootstrap/scss/_buttons.scss

Lines 80 to 92 in b755883

	@include hover {
	color: $link-hover-color;
	text-decoration: $link-hover-decoration;
	background-color: transparent;
	border-color: transparent;
	}
	&:focus,
	&.focus {
	text-decoration: $link-hover-decoration;
	border-color: transparent;
	box-shadow: none;
	}

but cannot find the reason for this. I came across this when trying to utilize some custom border styles on .btn-link and had the borders turn transparent on hover because of this.

Blame points to the change being introduced in #22951, but it isn't obvious to me the reasoning behind this rule. I propose removing it.

[tfevan]

Hi,
Thanks for asking. Read this, I think you'll get your answer.
https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element

[mdo]

Because .btn-link is a modifier of .btn, you need both classes on the element. The .btn-link makes it transparent instead of removing the border outright to prevent any potential shifting (not likely these days with our box-sizing) and maintain some consistency.

I could go either way with it. I don’t know for sure if there are any situations where we absolutely need the border to stick around. We’d have to test more.

[MartijnCuppens]

.btn already sets border-color: transparent;, so indeed this can be removed. The same with background-color: transparent; which was added in #27003. See R14-R15:

bootstrap/scss/_buttons.scss

Lines 7 to 15 in ed48d9a

	.btn {
	display: inline-block;
	font-weight: $btn-font-weight;
	color: $body-color;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: transparent;
	border: $btn-border-width solid transparent;

[andresgalante]

We kinda did the same here #27003