title: Java FX buttons slightly smaller when clicked/focus
body: <p>I have an issue where my buttons in JavaFX become slightly smaller when clicked. </p>
  
  <p><a href="https://gyazo.com/8b1a78f70c553084522547c8a5e038e9" rel="nofollow noreferrer">here</a> you can see that the "change password" button is clicked/selected.</p>
  
  <p><a href="https://gyazo.com/e5f328e57bf0c6c454800f05eb21e4e1" rel="nofollow noreferrer">here</a> you can see the "admin functions" button is clicked/selected.</p>
  
  <p>I suspected this was something to do with the buttons having focus, as when i click chrome or another application with this running, it reverts to desired <a href="https://gyazo.com/1af40ec01e6755872fdb1923ee46e502" rel="nofollow noreferrer">look</a></p>
  
  <p>the buttons are currently within a 4x1 GridPane, with the 0th slot being occupied by the label.</p>
  
  <p>here is my CSS if it helps:</p>
  
  <pre><code>.button{
  -fx-border-color: null;
  -fx-border-width: 0;
  -fx-background-color: #2c3cff;
  -fx-fill: true;
  -fx-pref-height: 100;
  -fx-pref-width: 320;
  -fx-text-fill: #b9b9b9;
  -fx-border-radius: 0;
  -fx-min-width: 320;
  -fx-min-height: 100;
  -fx-background-radius: 0;
  -fx-animated: false;
  
  }
  
  
  .grid{
      -fx-background-color:#3e3e48;
  }
  
  .label{
      -fx-text-fill: #b9b9b9;
  }
  </code></pre>
  
  <blockquote>
    <p>Edit: I have found a temporary "solution", more of a workaround: I put
    a horizontal separator just below my HBox and this allowed me to mask
    the weird button size changes. would still like answers about how to
    do this properly. </p>
    
    <p>Thanks!</p>
  </blockquote>