JavaFX - left border on Button without moving its text or resizing it
<p>I want to create a <code>Button</code>. At the start it has no border, just a background-color. So I set the following CSS attributes:</p>

<pre><code>.button, .toggle-button {
  -fx-background-color: #373e48;
  -fx-background-radius: 0;
}
</code></pre>

<p>When the <code>Button</code> is pressed / selected, a border on the left side should appear, so I added this:</p>

<pre><code>.button:pressed, .toggle-button:selected {
  -fx-border-color: #ee543a;
  -fx-border-width: 0 0 0 2px;
}
</code></pre>

<p>The problem with that is that everytime the border is shown, the <code>Button</code> gets a little bit wider.</p>

<p>I also tried to set the alignment to <code>center-right</code> and add a minimum width, but if the <code>Button</code> gets bigger, it doesn't work anymore like that. And it does actually not look like I want it to.</p>

<p>So, how can I do that without this behavior? Preferably with the text aligned to the center.</p>