There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button.
The class 'btn' is defined below;
.btn {
background:transparent;
border:2px solid #FFF;
padding: 18px 30px 18px;
line-height:1.7em;
max-width:100%;
white-space:normal;
margin-top:25px;
border-radius:100px;
text-transform: uppercase;
letter-spacing:0.1em;
font-weight:bold;
color:#FFF;
text-decoration:none;
transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
When this class is applied to an anchor tag, it displays correctly;
https://i.sstatic.net/jojpv.png
However, when the same class is applied to a button, it appears to have a larger line height, causing the text to sit at the bottom of the button;
https://i.sstatic.net/7ZxV7.png
I've attempted to reset the button's line-height in the CSS file, but that did not resolve the issue.
Does anyone have any insight into what might be causing this discrepancy? How can I ensure that both buttons and anchor tags display in a consistent manner?