v6: Make sure `<button>` and `<a>` links have same vertical text alignment

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

split out from https://github.com/twbs/bootstrap/pull/37432#issuecomment-1304469946

for v6, it would be good to revisit styles for <button>, so authors can use the correct <button> element without incurring visual penalties/having to do extra work to make it look seamless when placed next to static text or <a> links.

Motivation and context

Use of <a href="#" role="button"> for pseudo-buttons/toggles is ... "ok", but the recommended/ideal scenario is using actual <button> elements. Beyond idealistic "it's the correct semantic element to use", there are differences in how <a> and <button> operate:

• links still give you context menus in browsers with "Open in new tab..." etc, which make no sense for these types of controls
• <button> can be activated using Space and Enter (and this is what screen readers will announce as a hint in most cases), while <a> only reacts to Enter; when a link "pretends" to be a button with role="button", it can happen that AT users will try to activate it using Space but that will have no effect (and visually, that will just scroll the current page in the browser)

with our current v5 styles though, it's sometimes not easy to use appropriate <button> elements, as the styling is subtly different when dropped in with regular text/links...the vertical alignment of button content is slightly off

taking https://getbootstrap.com/docs/5.2/components/navbar/#supported-content as an example, changing the control to <button class="btn btn-link nav-link dropdown-toggle">...</button> gets us close, but the vertical text alignment is off

that is, i think, one of the main reasons why for some components/patterns, authors still use an <a href="..." role="button"> at the moment...because the alternative just doesn't work out of the box.