Whats causing misalignment with submit button and button

I have HTML like ...

<input开发者_JS百科 type="submit" name="submit" id="submit" value="Login">
<button name="forgotPassword" id="forgotPassword" type="button" class="linkButton">Forgot Password</button>

CSS looks like

input[type=button], input[type=submit], button {
  border: none;
  background: $mainColor;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}
input[type=button]:hover, input[type=button]:active,
input[type=submit]:hover, input[type=submit]:active,
button:hover, button:active {
  background: $hoverColor;
}

But my buttons seem misaligned ... forgot password is alittle higher ... How can I fix this (align them vertically)?

How about using <input type="button"> instead of <button>?

You can change the height attribut of the login button a bit highter in IE. But aligned okey in forfox.

input[type=button], input[type=submit], button {
  border: none;
  background: $mainColor;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;

}
input[type=button]:hover, input[type=button]:active,
input[type=submit]:hover, input[type=submit]:active,
button:hover, button:active {
  background: $hoverColor;
  height:50px;
}