CODEWITHSUNDEEP
htmlcssbutton
MrMz
MrMz

Reputation: 437

Prevent button resizing by the number of words inside the button

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

enter image description here

enter image description here

<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

Answers (3)

Aib Syed
Aib Syed

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

Nisharg Shah
Nisharg Shah

Reputation: 19692

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

Anwar Hossen
Anwar Hossen

Reputation: 584

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

Upvotes: 1

Related Questions