title: JavaFX - left border on Button without moving its text or resizing it
body: <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>