Create same size buttons - html

Question

Code below creates two buttons with different size in html form. How to make these buttons same size?
<form>
<input type="button" value="btn"">
<input type="button" value="superLongButon"">
</form>

Answer 1

How wide a button appears on a page is controlled using CSS.
There are at least 3 ways to achieve what you are trying to do.
1. Inline CSS:
<form>
<input type="button" style="width:200px;" value="btn"">
<input type="button" style="width:200px;" value="superLongButon"">
</form>
2. Adding an HTML class and creating a CSS rule for that class:
<form>
<input type="button" class="frmBtn" value="btn"">
<input type="button" class="frmBtn" value="superLongButon"">
</form>
Then you add this in your CSS file:
.frmBtn {
width:200px
}
3. CSS only (no need to edit your html):
form input[type='button'] {
display:inline-block;
width:200px; //or as wide as you want them to be
}
Number 1 should generally be avoided where possible as you lose the consistency and performance benefits of using an external style sheet.

Answer 2

Create a style class and use it in both button.
.clsButton {
//Put your style declaration here
}
<form>
<input type="button" value="btn" class="clsButton">
<input type="button" value="superLongButon" class="clsButton">
</form>

Answer 3

You could use the CSS flexbox to achieve this behavior.
Check the following example:
form {
display: flex;
}
input,
button {
flex: 1;
}
<form>
<button>small button</button>
<button>this is the bigger button</button>
</form>
<form>
<input type="button" value="small button">
<input type="button" value="this is the bigger button">
</form>

Answer 4

I had a similar task. I'd suggest in that case to count letters of text for each button, multiply the size to a certain width, and use the maximal value as an inline value for the width.
Example:
const buttonOne = "save" // 4
const buttonTwo = "save with notification" // 22
const maxLength = Math.max(buttonOne.length, buttonTwo.length)
const letterWidth = 5 // play with this value
const additionalWidth = 3; // play with it to find the value that suits your needs
const maxWidth = maxLength * letterWidth + additionalWidth;
// React
// I use 'ch' here, because 'ch' is width of 0 (in css)
<button style={{width: "${maxWidth}ch"}}>{{buttonOne}}</button>
<button style={{width: "${maxWidth}ch"}}>{{buttonTwo}}</button>