Prevent button resizing by the number of words inside the button - html

Question

is there any way to prevent the button resizing by the number of text characters inside the button?
I have 2 buttons with the same CSS class but the size of one of them is different because of the number of characters inside it
<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 );
}

Answer 1

You just need to give it a width. Below I've given it 200px, you can change this to your preference.
Additionally, apply min-width or max-width if you want to ensure it doesn't go below or above a certain width.
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
/*change width to your preference*/
width: 200px;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>

Answer 2

You could use max-width in .my-btn class

Answer 3

I think fix width is your solution
.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 );
width: 150px;
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>