Button Hover and pressed effect CSS Javafx

Lakshmi Narayanan :

I am new to CSS and have the following CSS style defined for the button, with the id and the custom style is applied, but not the hover and pressed effect.

#bevel-grey {
  -fx-background-color: linear-gradient(#f2f2f2, #d6d6d6), linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%), linear-gradient(#dddddd 0%, #f6f6f6 50%);
  -fx-background-radius: 8, 7, 6;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: black;
  -fx-effect: dropshadow( three-pass-box, rgba(0, 0, 0, 0.6), 5, 0.0, 0, 1);
}

#bevel-grey:hover {
  -fx-background-color: #981100;
}

#bevel-grey:pressed {
  -fx-background-color: #235891;
}

Replacing #bevel-grey with .button does not give me the custom effects, but works for hover and pressed. How can I get it working along with the custom style defined?

UPDATE

The Main code, to reproduce the problem.

package application;

import java.util.List;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;


public class Main extends Application 
{
     @Override
     public void start(Stage primaryStage) 
     {
          try 
          {
              Pane p = new Pane();
              Scene scene = new Scene(p,400,400);
              Button b = new Button();
              b.setId("bevel-grey");
              b.getStylesheets().add(getClass().getResource("ButtonStyles.css").toExternalForm());
              b.setLayoutX(150);
              b.setLayoutY(300);
              b.setPrefWidth(100);
              b.setText("Start");
              p.getChildren().add(b);
              primaryStage.setScene(scene);
              primaryStage.show();
          } 
          catch(Exception e) 
          {
              e.printStackTrace();
          }
      }

      public static void main(String[] args) {
          launch(args);
      }
}

Slaw :

As I understand the problem, the styles specified by :hover and :pressed are being applied but the gradients you have in the default style are not maintained. This makes sense since:

#bevel-grey:hover {
  -fx-background-color: #981100;
}

Replaces the background color(s) declared by:

#bevel-grey {
  -fx-background-color: linear-gradient(#f2f2f2, #d6d6d6), linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%), linear-gradient(#dddddd 0%, #f6f6f6 50%);
  /* ... omitted for brevity ... */
}

Same with regards to #bevel-grey:pressed. What you need to do is change the colors used by the linear gradients if you want to continue using said linear gradients. An obvious way to do that is to simply re-declare the linear-gradient(...) background colors for each pseudo-class, but using the new gradient colors. However, a more maintainable solution in my opinion is to use named colors. Here's an example:

#bevel-grey {
  -fx-color-one: #d6d6d6;
  -fx-color-two: #d9d9d9;
  -fx-color-three: #f6f6f6;

  -fx-background-color:
      linear-gradient(#f2f2f2, -fx-color-one),
      linear-gradient(#fcfcfc 0%, -fx-color-two 20%, -fx-color-one 100%),
      linear-gradient(#dddddd 0%, -fx-color-three 50%);
  -fx-background-radius: 8, 7, 6;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: black;
  -fx-effect: dropshadow( three-pass-box, rgba(0, 0, 0, 0.6), 5, 0.0, 0, 1);
}

#bevel-grey:hover {
  -fx-color-one: #981100;
  -fx-color-two: #981100;
  -fx-color-three: #981100;
}

#bevel-grey:pressed {
  -fx-color-one: #235891;
  -fx-color-two: #235891;
  -fx-color-three: #235891;
}

I had to guess with some of the color values as I'm not exactly sure what you want the end result to look like. The above CSS gives the following output:

---

As an aside, consider using :armed instead of :pressed for button controls. The :pressed pseudo-class will only activate by the mouse being pressed, whereas a button can be armed by additional actions (e.g. pressing space/enter key while the button has focus).