Consider this code snippet:
.ul {
list-style-type: none;
}
.li {
display: inline-block;
border: black solid 1px;
margin-left: 20px;
}
.btn {
padding: 20px;
text-transform: uppercase;
}<ul class="ul">
<li class="li">
<button class="btn">
Button Here
</button>
</li>
<li class="li">
<a class="btn" href="#">
Link Here
</a>
</li>
</ul>Even though I try to apply padding to the <a> element, it's not working as expected.
https://i.sstatic.net/Axmbm.png
I have tried applying padding to the <li> element, but it's not ideal because only the <a> part is clickable.