How to make two buttons the same size? - html

Question

How can I fix this because if the text is long the button will be longer.
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>

Answer 1

you need to set a width and height for your button and to centre text horizontally and vertically use the following:
width:120px;
height:50px;
text-align:center;
line-height:1.1em;
font-size:1.1em;
width and height can be set to match your desired measurements.
This can be used for future demonstration:
https://jsfiddle.net/j9njkwkq/
EDIT:
of course you can add cursor:pointer in order to get the "right" button effect on a browser.

Answer 2

In this case you should use. min-width attribute.
Use min-width:100px

Answer 3

Add width to the style definition, for example:
max-width: 100px;
or just:
width: 100px;
https://jsfiddle.net/ghc9aw3w/
Of course you have to adjust the value to the text's required length.

Answer 4

button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width:200px
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>

Answer 5

You could make a wrapper and than set the width to 100%
#login {
width: 300px;
}
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width: 100%;
}
button:hover {
background: #3E3E3E;
}
<div id='login'>
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>

Answer 6

Give "width" for the class .md-trigger or button to make that same even if long text is entered.

Answer 7

For perfect styling wrap the contents inside a div
https://jsfiddle.net/ghc9aw3w/2/
<div class="btnwrap">
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>
then the style would be
.btnwrap{
width:200px;
overflow:hidden;
}
button {
width:100%;
display:block;
border: none;
padding: 1.1em 5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
text-align:center;
}
button:hover {
background: #3E3E3E;
}