Reputation: 437
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 );
}
Upvotes: 2
Views: 4391
Reputation: 3196
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>
Upvotes: 2
Reputation: 19702
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>
Upvotes: 1