CODEWITHSUNDEEP
htmlcss
INOH
INOH

Reputation: 385

Increase HTML Button Font size without altering button size

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>

Upvotes: 2

Views: 6916

Answers (2)

borbesaur
borbesaur

Reputation: 691

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>

Upvotes: 1

spencer.sm
spencer.sm

Reputation: 20528

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.

Upvotes: 4

Related Questions