Zoltan Szabo Zoltan Szabo - 4 months ago 72
CSS Question

JavaFX Button hover scaling

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?

Answer

You can check the CSS Reference Guide of Node, that it has an -fx-scale-x, -fx-scale-y and an -fx-scale-z CSS property, which has a default value of 1. Node is the superclass of Button therefore it inherits these properties.

To apply it to any button on hover in your application, add this css class 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.

Comments