2

I started learning about JavaFX effects, but I can't seem to find any relevant information on button scalling on hover.

I'm guessing it could be done by either JavaFX code with the Scale transition or with CSS. In CSS I have found a way to grow button's on mouse hover, but I don't know how to implement it to JavaFX.

Here is the grow hover effect in pure css code for html:

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

How could I transform that css code into fx-css code? Is css code the same as fx-css code? (meaning do i just have to put "-fx-[buttonID]"in front and thats it?)

If there is any information reguarding CSS animations and stuff like that for JavaFX css, I would like to know.

Could you please help me with this task?

DVarga
  • 21,311
  • 6
  • 55
  • 60
Zoltan Szabo
  • 77
  • 1
  • 7

1 Answers1

6

Node has a -fx-scale-x, -fx-scale-y and an -fx-scale-z CSS property, which have the default value of 1. Node is the superclass of Button therefore these properties are inherited.

To apply it to any button on hover in your application, add this css selectpr to your stylesheet:

.button:hover {
    -fx-scale-x: 1.1;
    -fx-scale-y: 1.1;
    -fx-scale-z: 1.1;
}

To see what CSS styles the different controls have you can check the linked guide and you can also check the default stylesheet for JavaFX 8 (modena.css).

To learn about how to style your application with CSS, you can check this tutorial.

DVarga
  • 21,311
  • 6
  • 55
  • 60