How to make two buttons the same size?

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

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

Answer 2

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.