I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose.
Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a> element, the button ends up having a width of 100%. It seems that the issue lies with the display-block property, but I can't quite figure out why it works for the button but not for the <a> element. Both elements share the same display property, so logically they should exhibit the same behavior.
(I want the buttons to be stacked vertically and centered within the parent container .buttonRow).
Both buttons should resemble the appearance of the first example (using <button>)
.buttonRow {
display: block;
text-align: center;
}
.button {
display: block;
margin: 0 auto;
margin-bottom: 15px;
background-color: #ccad91;
color: white;
font-size: 18px;
padding: 17px 50px;
border-radius: 35px;
border: none;
outline: none;
outline: 0;
}<div class="buttonRowl">
<button class="button">Proceed</button>
<a class="button" href="index.html">Cancel</a>
</div>