How can I prevent a button from resizing based on the number of characters inside it? I have noticed that two buttons with the same CSS class are displaying different sizes due to the amount of text inside them.
https://i.sstatic.net/BggFW.png
https://i.sstatic.net/7lWu3.png
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
CSS:
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}