CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden

[Rolf B]

Hallo ebody,

<div id="box">
  <div id="btn">Klick</div>
</div>

Du hast bestimmt gemeint

<div id="box">
  <button id="btn">Klick</button>
</div>

Den kannst Du so stylen, dass er wie dein div aussieht. Aber das löst dein Problem nicht.

Wenn sich der Button an die Größe des Texts anpassen soll, dann tut er das eben. Und wenn der Text sich verändert, ändert sich der Button mit.

Du könntest schauen, ob Du einen Font findest, dessen Dickten^[1] bei Änderung des font-weight gleich bleiben.

Abraten würde ich von Spielereien mit letter-spacing. Das geht in deinem Fall, mit letter-spacing:-1.2px bleibt die Breite visuell unverändert, aber wehe der Font ist nicht da oder irgendwelche andere Skalierungseffekte schlagen zu. Das ist zu spröde.

Eine Idee könnte sein, statt font-weight einen Schatten zu nutzen:

  #btn:hover{
     text-shadow: 0px 0px 2px #fff;
  }

Rolf

---

1. Nein, nicht diese. Sondern jene. ↩︎