Button Hover and pressed effect CSS Javafx

Question

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);
      }
}

I cannot reproduce the problem. Could you [edit] your question to provide a [mre], please? — Slaw, Feb 21 '20 at 07:50
@Slaw please check the update. I skipped other elements and just presented the button. — Lakshmi Narayanan, Feb 21 '20 at 08:17
Not quite a minimal example. What's `application.css`? What's `l` from `p.getChildren().add(l)`? Does `ButtonStyles.css` contain _only_ the CSS provided in your question? And to clarify the problem: The CSS you currently have, as shown in the question, does not apply the `:hover` and `:pressed` styles, is that correct? Also, what version of JavaFX are you using? — Slaw, Feb 21 '20 at 08:29
Apologies. application.css is to style the scene , background color etc. That may not be required and is removed. As mentioned in the question, the hover and pressed effect does not apply as defined in the css. The complete css from ButtonStyles.css is presented in the question. — Lakshmi Narayanan, Feb 21 '20 at 08:46
Is the problem that the _gradients_ are not carried over into the `:hover` and `:pressed` styles? Because otherwise I still cannot reproduce the problem (the color of the button changes for me when appropriate). — Slaw, Feb 21 '20 at 09:04
Yes. I am not clear on that. The gradients specified were copied from a template and they provide a specific visual effect to the buttons. With these effects present, I was trying to create a hover and pressed visual feel, but not able to achieve it. — Lakshmi Narayanan, Feb 21 '20 at 09:07

Slaw · Accepted Answer · 2020-03-02T22:44:53.540

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 so-called "looked-up 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 the Space or Enter key while the button has focus).

Button Hover and pressed effect CSS Javafx

1 Answers1

Linked