Create same size buttons

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>