title: Button with image (styling with FXML/CSS)
body: <p>I have problem and don't have any idea how to solve it. 
  I have button and I need to add image next to text on right. I did it but after resizing this button, image is always next to text. There is any solution to get text toleft and image to right side of button? (like on screenshot from scenebuilder)</p>
  
  <p>FXML code:</p>
  
  <pre><code>&lt;Button fx:id="btn1" alignment="BASELINE_LEFT" contentDisplay="RIGHT" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="50.0" text="Text"&gt;
             &lt;graphic&gt;
                &lt;ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true"&gt;
                &lt;image&gt;       
                  &lt;Image url="/images/User/user.png" preserveRatio="false" smooth="false" /&gt;          
                &lt;/image&gt;
                &lt;/ImageView&gt;
             &lt;/graphic&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/z5cCZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z5cCZ.png" alt="enter image description here"></a></p>