SeinopSys SeinopSys - 5 months ago 10
CSS Question

Buttons & links with same styles and content don't line up

I'm trying to style each

button
and
a.btn
to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.



#wrap {
border: 2px solid red;
}

button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}

<div id="wrap">
<a href="#" class="btn">Link</a>
<button>Link</button>
</div>





I've tried changing the
vertical-align
to
bottom
, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).



#wrap {
border: 2px solid red;
}

button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;

vertical-align: bottom;
}

<div id="wrap">
<a href="#" class="btn">Link</a>
<button>Link</button>
</div>





How can I make both elements display the same way in both Chrome and Firefox?

Answer

Erase the height setting from the rule and fine-tune the height only with the paddingparameters:

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}
<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

Comments