HTML Buttons with size not equal to each other since code is exactly the same

user_6694814 0
Viewed 54

I am wondering why my buttons aren't equal to each other since both HTML and CSS code is exactly the same.

enter image description here

HTML code:

   <div class="export-left">    
    <button type="button" class="formreturn" value="Copy Url" onclick="Copy();">Copy Url</button>
    <label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
    <button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>  
    </div>
    <div class="export-right">
    <button type="button" class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
    <button type="button" id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
    </div>

CSS

 .export {
display: flex;
align-items: flex-start;
}

 .export-left {
display: flex;
 }
 .export-right {
  margin-left: auto;
  }

  .formreturn {
  font-weight:700;
  text-decoration: none;
  color:black;
  background:#c6e2f2;
  padding: 8px;
  border-radius: 3px;   
  }

  .excelsubmit {
  font-weight:700;
  float: right;
  padding: 8px;
  background:#c6e2f2;
  border-radius: 3px;
  }

Where have I made mistake? I want these buttons in the same size (height) roughly. Unfortunately, the padding didn't work here.

css html
3 Answers

Give each button an additional class like

<button type="button" class="btn formreturn"

Then in your CSS give the class btn a minimum width

CSS

.btn{
  min-width: 100px;
}
user_58475640

Apply this:

.export-left {
    display: flex;
    align-items: flex-start;
}
user_73784060

In your example, the export class isn't used, after wrapping your code in that class everything is aligned.

Like so:

body {
  padding: 20px; /* for demo */
}

.export {
  display: flex;
  align-items: flex-start;
}

.export-left {
  display: flex;
}
.export-right {
  margin-left: auto;
}

.formreturn {
  font-weight: 700;
  text-decoration: none;
  color: black;
  background: #c6e2f2;
  padding: 8px;
  border-radius: 3px;
}

.excelsubmit {
  font-weight: 700;
  float: right;
  padding: 8px;
  background: #c6e2f2;
  border-radius: 3px;
}
<div class="export">
  <div class="export-left">
    <button type="button" class="formreturn" value="Copy Url" onclick="Copy();">
      Copy Url
    </button>

    <label>
      <input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name" />.txt
    </label>

    <button type="button" class="formreturn" onclick="saveURLtoTXTfile();">
      <span class="glyphicon glyphicon-download"></span>.TXT
    </button>
  </div>

  <div class="export-right">
    <button type="button" class="excelsubmit" onclick="exportData()">
      <span class="glyphicon glyphicon-download"></span>.CSV
    </button>

    <button type="button" id="btnExport" class="excelsubmit" onclick="fnExcelReport();">
      <span class="glyphicon glyphicon-download"></span>.XLS
    </button>
  </div>
</div>

user_123700670
Related