Styling FX Buttons with CSS

December 20, 2011

By Jasper Potts

A number of people have asked me recently can I create this look or that look using CSS in JavaFX. Or they have said that you could never do that! So I thought I would do a little experiment and try recreating a bunch of common button styles purely using CSS. So without further ado, here is the result:


All of these are mostly created with multiple background fill layers each with a gradient. Then there is a little font tweaking and some subtle effects. So for example all you need to make a JavaFX button look like a Windows 7 button is:

#windows7-default {     -fx-background-color:         #3c7fb1,         linear-gradient(#fafdfe, #e8f5fc),         linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);     -fx-background-insets: 0,1,2;     -fx-background-radius: 3,2,1;     -fx-padding: 3 30 3 30;     -fx-text-fill: black;     -fx-font-size: 14px; }

The first line defines the 3 background fills, first is solid color and the other two are linear gradients. The background-insets offsets the backgrounds so they do not 100% paint over each other and the second background is 1px in from the outside and the 3rd background is 2px in from the outside of the button. The background-radius us setting the corner radius’s of the 3 backgrounds getting smaller as the backgrounds move in, this makes the gap between the borders a consistent 1 pixel all the way around. Padding adds extra space around the text to make the button bigger by default. Then the last two lines set the text color and size. That is all there is too it.
I have not included styles for the pressed, over and focused states of all the buttons but they can all be easily added in a similar way. I have included a over and pressed state for the “Record Sales” button as a example.
You can download the complete Netbeans project with all the code here.
ButtonStyles.zip
Here is the CSS code of all the button styles you see above:

#green {

    -fx-background-color:

        linear-gradient(#f0ff35, #a9ff00),

        radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);

    -fx-background-radius: 6, 5;

    -fx-background-insets: 0, 1;

    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );

    -fx-text-fill: #395306;

}

#round-red {

    -fx-background-color: linear-gradient(#ff5400, #be1d00);

    -fx-background-radius: 30;

    -fx-background-insets: 0;

    -fx-text-fill: white;

}

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

}

#glass-grey {

    -fx-background-color:

        #c3c4c4,

        linear-gradient(#d6d6d6 50%, white 100%),

        radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);

    -fx-background-radius: 30;

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

}

#shiny-orange {

    -fx-background-color:

        linear-gradient(#ffd65b, #e68400),

        linear-gradient(#ffef84, #f2ba44),

        linear-gradient(#ffea6a, #efaa22),

        linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%),

        linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0));

    -fx-background-radius: 30;

    -fx-background-insets: 0,1,2,3,0;

    -fx-text-fill: #654b00;

    -fx-font-weight: bold;

    -fx-font-size: 14px;

    -fx-padding: 10 20 10 20;

}

#dark-blue {

    -fx-background-color:

        #090a0c,

        linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),

        linear-gradient(#20262b, #191d22),

        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));

    -fx-background-radius: 5,4,3,5;

    -fx-background-insets: 0,1,2,0;

    -fx-text-fill: white;

    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );

    -fx-font-family: "Arial";

    -fx-text-fill: linear-gradient(white, #d0d0d0);

    -fx-font-size: 12px;

    -fx-padding: 10 20 10 20;

}

#dark-blue Text {

    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 1, 0.0 , 0 , 1 );

}

#record-sales {

    -fx-padding: 8 15 15 15;

    -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;

    -fx-background-radius: 8;

    -fx-background-color:

        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),

        #9d4024,

        #d86e3a,

        radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);

    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );

    -fx-font-weight: bold;

    -fx-font-size: 1.1em;

}

#record-sales:hover {

    -fx-background-color:

        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),

        #9d4024,

        #d86e3a,

        radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c);

}

#record-sales:pressed {

    -fx-padding: 10 15 13 15;

    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;

}

#record-sales Text {

    -fx-fill: white;

    -fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );

}

#rich-blue {

    -fx-background-color:

        #000000,

        linear-gradient(#7ebcea, #2f4b8f),

        linear-gradient(#426ab7, #263e75),

        linear-gradient(#395cab, #223768);

    -fx-background-insets: 0,1,2,3;

    -fx-background-radius: 3,2,2,2;

    -fx-padding: 12 30 12 30;

    -fx-text-fill: white;

    -fx-font-size: 12px;

}

#rich-blue Text {

    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);

}

#big-yellow {

    -fx-background-color:

        #ecebe9,

        rgba(0,0,0,0.05),

        linear-gradient(#dcca8a, #c7a740),

        linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),

        linear-gradient(#f6ebbe, #e6c34d);

    -fx-background-insets: 0,9 9 8 9,9,10,11;

    -fx-background-radius: 50;

    -fx-padding: 15 30 15 30;

    -fx-font-family: "Helvetica";

    -fx-font-size: 18px;

    -fx-text-fill: #311c09;

    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);

}

#big-yellow Text {

    -fx-effect: dropshadow( one-pass-box , rgba(255,255,255,0.5) , 0, 0.0 , 0 , 1);

}

#iphone-toolbar {

    -fx-background-color: linear-gradient(#98a8bd 0%, #8195af 25%, #6d86a4 100%);

}

#iphone {

    -fx-background-color:

        #a6b5c9,

        linear-gradient(#303842 0%, #3e5577 20%, #375074 100%),

        linear-gradient(#768aa5 0%, #849cbb 5%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%);

    -fx-background-insets: 0 0 -1 0,0,1;

    -fx-background-radius: 5,5,4;

    -fx-padding: 7 30 7 30;

    -fx-text-fill: #242d35;

    -fx-font-family: "Helvetica";

    -fx-font-size: 12px;

    -fx-text-fill: white;

}

#iphone Text {

    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 );

}

#ipad-dark-grey {

    -fx-background-color:

        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),

        linear-gradient(#020b02, #3a3a3a),

        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),

        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),

        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);

    -fx-background-insets: 0,1,4,5,6;

    -fx-background-radius: 9,8,5,4,3;

    -fx-padding: 15 30 15 30;

    -fx-font-family: "Helvetica";

    -fx-font-size: 18px;

    -fx-font-weight: bold;

    -fx-text-fill: white;

    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);

}

#ipad-dark-grey Text {

    -fx-effect: dropshadow( one-pass-box , black , 0, 0.0 , 0 , -1 );

}

#ipad-grey {

    -fx-background-color:

        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),

        linear-gradient(#020b02, #3a3a3a),

        linear-gradient(#b9b9b9 0%, #c2c2c2 20%, #afafaf 80%, #c8c8c8 100%),

        linear-gradient(#f5f5f5 0%, #dbdbdb 50%, #cacaca 51%, #d7d7d7 100%);

    -fx-background-insets: 0,1,4,5;

    -fx-background-radius: 9,8,5,4;

    -fx-padding: 15 30 15 30;

    -fx-font-family: "Helvetica";

    -fx-font-size: 18px;

    -fx-font-weight: bold;

    -fx-text-fill: #333333;

    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);

}

#ipad-grey Text {

    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );

}

#lion-default {

    -fx-background-color:

        rgba(0,0,0,0.08),

        linear-gradient(#5a61af, #51536d),

        linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);

    -fx-background-insets: 0 0 -1 0,0,1;

    -fx-background-radius: 5,5,4;

    -fx-padding: 3 30 3 30;

    -fx-text-fill: #242d35;

    -fx-font-size: 14px;

}

#lion {

    -fx-background-color:

        rgba(0,0,0,0.08),

        linear-gradient(#9a9a9a, #909090),

        linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);

    -fx-background-insets: 0 0 -1 0,0,1;

    -fx-background-radius: 5,5,4;

    -fx-padding: 3 30 3 30;

    -fx-text-fill: #242d35;

    -fx-font-size: 14px;

}

#windows7-default {

    -fx-background-color:

        #3c7fb1,

        linear-gradient(#fafdfe, #e8f5fc),

        linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);

    -fx-background-insets: 0,1,2;

    -fx-background-radius: 3,2,1;

    -fx-padding: 3 30 3 30;

    -fx-text-fill: black;

    -fx-font-size: 14px;

}

#windows7 {

    -fx-background-color:

        #707070,

        linear-gradient(#fcfcfc, #f3f3f3),

        linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);

    -fx-background-insets: 0,1,2;

    -fx-background-radius: 3,2,1;

    -fx-padding: 3 30 3 30;

    -fx-text-fill: black;

    -fx-font-size: 14px;

}

source:  http://fxexperience.com/2011/12/styling-fx-buttons-with-css/