title: How to get back the onclick effect on a button in JavaFX
body: <p>I looked for a solution on this particular issue &amp; found a few ones on Silverlight &amp; JavaScript, but not on JavaFX. </p>
  
  <p>Now on the issue:</p>
  
  <p>I am designing a GUI in JavaFX where I have added two buttons: ADD &amp; REMOVE</p>
  
  <p>I have styled the ADD button using CSS, but it has lost its hovering &amp; onclick effect. I have attached a couple of images for better understanding of the issue</p>
  
  <ol>
  <li>If you look at <a href="https://i.stack.imgur.com/GYB06.png" rel="nofollow noreferrer">this</a> photo here, you'll see that when the REMOVE button is clicked, <strong>it slightly changes its color to give the effect that it is being clicked currently</strong>. Also when the cursor hovers over it, <strong>it turns slightly brighter than it usually is</strong>. </li>
  </ol>
  
  <p>The code for this button is given below</p>
  
  <pre><code>VBox rightBox = new VBox(remBttn);
  rightBox.setPadding(new Insets(10));
  rightBox.setAlignment(Pos.CENTER);
  remBttn.setPadding(new Insets(100,0,100,0));
  remBttn.setPrefWidth(100);
  remBttn.setOnAction(
          new EventHandler&lt;ActionEvent&gt;()
          {
              public void handle(ActionEvent ae)
              {
                  myLabel.setText("You Clicked The REMOVE Button");
              }
          });
  remBttn.setFont(Font.font(20));
  </code></pre>
  
  <ol start="2">
  <li>However, if you look at <a href="https://i.stack.imgur.com/E9Ye3.png" rel="nofollow noreferrer">this</a> photo here, you'll notice that <strong>hovering and clicking have no effects</strong> on it. I don't know much about CSS, so I copied a snippet of code from a random Website to style my button. But I think that is where I messed it all up. </li>
  </ol>
  
  <p>The code for that give below: </p>
  
  <pre><code>VBox leftBox = new VBox(addBttn);
  leftBox.setPadding(new Insets(10));
  leftBox.setAlignment(Pos.CENTER);
  addBttn.setPadding(new Insets(100,0,100,0));
  addBttn.setPrefWidth(100);
  addBttn.setStyle("-fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); -fx-focus-color: transparent; -fx-base: coral;");
  </code></pre>
  
  <p>So I want to know what methods or properties can be used to bring back the same effects without changing the style.</p>