Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do a "shine" effect in CSS (see the picture below) on a button in JavaFX?

Tags:

css

button

javafx

This is the css I've tried:

.button {
  -fx-background-radius: 4;
  -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 10, 0, 0, 1);
  -fx-background-insets: 0, 1;
  -fx-padding: 5 20 5 20;
}
<div class="button">Nouvea</div>

This is the effect I want:

https://i.stack.imgur.com/E4zLV.png

like image 462
jeff Avatar asked Sep 17 '18 22:09

jeff


1 Answers

Try this css :

#shinyButton{
    -fx-background-color: 
        #ECECEC,
        linear-gradient(#ECECEC 50%, #D5D5D5 100%),
        radial-gradient(center 50% -40%, radius 200%, #ECECEC 45%, #D5D5D5 50%);
    -fx-background-radius: 10;
    -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 );
}

enter image description here

For more info check the link @Sedrick gave you in the comments.

like image 111
JKostikiadis Avatar answered Oct 23 '22 08:10

JKostikiadis