After noticing that I really like the style of the default buttons from pre-Bootstrap 4, I decided to try my hand at creating my own version using SASS code. Here's what I came up with:
.btn-default {
@extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
Interestingly, this code works perfectly if I apply it to a <button> tag, but for some reason, it doesn't work when used on an <a> tag. I'm puzzled as to why it wouldn't work on both elements.
<a href="#" class="btn btn-default">
Test Anchor
</a>
<button type="submit" class="btn btn-default">
Test Button
</button>
https://i.sstatic.net/nJ75T.png
I wonder why applying the same styling to the anchor tag isn't working, especially considering that normally assigning the .btn class to an anchor tag should style it like a button.