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

Question

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 1

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>