Increase HTML Button Font size without altering button size - html

Question

The issue I am having is that when I change the size of the font in my button, the button then resizes. As of now, I would like to keep the buttons at one specific size. So, I have fixed my buttons to a specific size but now I cannot change the font size. I am currently running my program on Chrome.
Here is the HTML chunk:
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
</div>
<p>
<strong>Files You Selected:</strong>
<ul id="fileList">
<li>No Files Selected</li>
</ul>
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>
<style type="text/css">
.file-input-wrapper {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper>input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper>.btn-file-input {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper:hover>.btn-file-input {
background-color: #aaa;
}
.file-input-wrapper1 {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper1>input[type="submit"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper1>.btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover>.btn-file-input1 {
background-color: #ffff00;
}
</style>

Answer 1

You can set the button font size with the following:
button {
font-size: 40px;
}
Since your buttons have a defined height and width, it should not change their dimensions.

Answer 2

Add an additional class to all your buttons. Even if you have some "buttons" that are not actually buttons, but instead input type="submit" or input type="button", add this class to all of those things.
Then do this in your CSS:
.some_class_added_to_all_buttons{
width: some-width;
height: some-height;
font-size: some-font-size;
}
if you have a button that already has a class, add an additional one like this
<button class="btn-file-input1 additional_class">Upload Documents</button>