✔ [CSS] Gleich hohe Input-Felder und Buttons (Mozilla Firefox)

[ByeBye 242513]

Guten Tag Community,
wieso ist der a-Tag "Passwort vergessen?" nicht mit der Höhe vom button/input-Tag "Anmelden" identisch?
Darstellungsfehler tritt nur im Mozilla Firefox auf.


Live-Beispiel:
http://codepen.io/BadRequest/pen/lpBuJ/

<a href="#" class="button green">Passwort vergessen?</a>
<button name="anmelden" type="submit" class="button green">Anmelden</button>

.button {
  font-family: Arial, sans-serif;
  font-size: 1.0em;
  text-decoration: none;
  text-align: center;
  margin-left: 3px;
  vertical-align: middle;
  display: inline-block;
  padding: 3px 10px;
}

.green {
  border: 1px solid #83c41a;
  color: #ffffff;
  text-shadow: 1px 1px 0px #689324;
  background-color: #9dce2c;
}

html, body {
  margin: 0;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 0.875em;
}

P.S.: Gibt es eine CSS-Funktion die eine Klasse ausschließt, wenn das Objekt eine bestimmte Klasse verwendet?
Bsp.: (wird immer verwendet außer das Objekt besitzt die CSS-Klasse "Button")

a {
  color: #0c0c0c;
}

<a href="#">Link 1</a>
<a href="#" class="button">Link 2</a>

 

[ComFreek]

P.S.: Gibt es eine CSS-Funktion die eine Klasse ausschließt, wenn das Objekt eine bestimmte Klasse verwendet?

a:not(.button) {
  color: #0c0c0c;
}

 

[ByeBye 242513]

Danke für die schnelle P.S. Beantwortung, bleibt nur noch mein Hauptproblem.

 

[Yugeen]

Spricht was dagegen den "Passwort vergessen?" Button als ein <input type="button".../> zu definieren? Habs bei mir eben so gemacht, hat geklappt ^^

 

[ByeBye 242513]

Nach langer Recherche hier die Lösung:

button::-moz-focus-inner {
  border: 0;
}