title: How To Make Button Background Change OnClick
body: <p>I am trying to solve an issue with a calculator project I am working on with javafx 11 and java11 using Scene Builder. I am trying to figure out a way to make the buttons on the calculator change color when typing the corresponding value from the keyboard. Is there a method, or onKeyPressed etc type solution to this issue?</p>
  
  <p>I was able to make the button change colors when the a user clicks on it with a mouse (changes to green). This was accomplished in my css style sheet. I tried to add a method to my onKeyReleased method in my controller class, and could change the background that way, but could not determine a way to have the color change back in a timely manner without causing a lag on the UI. I want the UI to change colors similar to most calculators such as the standard windows calculator. This is where a user holds the key down and it changes color, and when releasing the key it changes back. </p>
  
  <pre><code>//main.java
  import javafx.application.Application;
  import javafx.fxml.FXMLLoader;
  import javafx.scene.Parent;
  import javafx.scene.Scene;
  import javafx.scene.image.Image;
  import javafx.stage.Stage;
  
  public class Main extends Application {
  
  @Override
  public void start(Stage primaryStage) throws Exception {
      Parent root = 
   FXMLLoader.load(getClass().getResource("calculator.fxml"));
      primaryStage.getIcons().add(new Image("CALC.png"));
      primaryStage.setTitle(" TS Calculator");
      primaryStage.setScene(new Scene(root, 250, 375));
      primaryStage.setResizable(true);
      primaryStage.setMinHeight(375);
      primaryStage.setMinWidth(250);
      primaryStage.show();
  }
  public static void main(String[] args) {
      launch(args);
  }
  
   /CSS
  Button{
  -fx-background-color: black;
  -fx-text-align: center;
  -fx-text-fill: white;
  -fx-border-color: green;
  -fx-font-size: 1em;
  -fx-border-radius: 10 10 10 10;
  -fx-background-radius: 10 10 10 10;
  }
  Button:pressed{
  -fx-background-color: green;
  }
  TextField{
  -fx-font-size: 1.5em;
  }
  
  //FXML (Only showing 1 button)
  
  &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?import javafx.scene.control.Button?&gt;
  &lt;?import javafx.scene.control.TextField?&gt;
  &lt;?import javafx.scene.layout.AnchorPane?&gt;
  &lt;?import javafx.scene.layout.ColumnConstraints?&gt;
  &lt;?import javafx.scene.layout.GridPane?&gt;
  &lt;?import javafx.scene.layout.RowConstraints?&gt;
  
  &lt;GridPane maxHeight="1.7976931348623157E308" 
  maxWidth="1.7976931348623157E308" minHeight="306.00" minWidth="204.0"
        prefHeight="288.0" prefWidth="208.0" style="-fx-background-color: 
  DARKSLATEGREY; -fx-border-color: green;"
        stylesheets="@styles.css" xmlns="http://javafx.com/javafx/11.0.1" 
  xmlns:fx="http://javafx.com/fxml/1" 
  fx:controller="com.trevorsmith.Controller"
        onKeyReleased="#acceptKeyboardInput"&gt;
  &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="4" 
  GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS" 
  onKeyPressed="#acceptKeyboardInput"&gt;
      &lt;children&gt;
              &lt;TextField fx:id="textFieldDisplay"  editable="false" 
  alignment="CENTER_RIGHT" maxHeight="1.7976931348623157E308" 
   maxWidth="1.7976931348623157E308" prefWidth="196.0" 
  AnchorPane.bottomAnchor="2.0" AnchorPane.leftAnchor="2.0" 
  AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="2.0" /&gt;
    &lt;/children&gt;
  &lt;/AnchorPane&gt;
  &lt;AnchorPane maxHeight="1.7976931348623157E308" 
  maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" 
  GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS"&gt;
    &lt;children&gt;
        &lt;Button maxHeight="1.7976931348623157E308" 
  maxWidth="1.7976931348623157E308" text="0" AnchorPane.bottomAnchor="0.0" 
  AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="0.0" 
  AnchorPane.topAnchor="0.0" /&gt;
    &lt;/children&gt;
  </code></pre>
  
  <p>I am unable to make the background color change on click, and when I release my key it change back.</p>