Java按钮设计

package com.han;



import javafx.application.Application;

import javafx.geometry.Insets;

import javafx.geometry.Pos;

import javafx.scene.SceneBuilder;

import javafx.scene.control.ButtonBuilder;

import javafx.scene.control.ToolBarBuilder;

import javafx.scene.layout.BorderPaneBuilder;

import javafx.scene.layout.VBoxBuilder;

import javafx.scene.paint.Color;

import javafx.stage.Stage;



public class ButtonStyles extends Application {

    public static void main(String[] args) { launch(args); }

    

    @Override public void start(Stage primaryStage) {

        primaryStage.setTitle("JavaFX CSS Buttons");

        primaryStage.setScene(SceneBuilder.create()

            .stylesheets(ButtonStyles.class.getResource("Buttons.css").toExternalForm())

            .fill(Color.gray(0.9))

            .root(

                BorderPaneBuilder.create()

                    .left(

                        VBoxBuilder.create()

                            .spacing(10)

                            .padding(new Insets(20))

                            .alignment(Pos.CENTER)

                            .children(

                                ButtonBuilder.create().text("Green").id("green").build(),

                                ButtonBuilder.create().text("Round Red").id("round-red").build(),

                                ButtonBuilder.create().text("Bevel Grey").id("bevel-grey").build(),

                                ButtonBuilder.create().text("Glass Grey").id("glass-grey").build(),

                                ButtonBuilder.create().text("Shiny Orange").id("shiny-orange").build(),

                                ButtonBuilder.create().text("DARK BLUE").id("dark-blue").build(),

                                ButtonBuilder.create().text("Record Sales").id("record-sales").build(),

                                ButtonBuilder.create().text("Rich Blue").id("rich-blue").build(),

                                ButtonBuilder.create().text("Big Yellow").id("big-yellow").build(),

                                ToolBarBuilder.create()

                                    .id("iphone-toolbar")

                                    .items(

                                        ButtonBuilder.create().text("iPhone").id("iphone").build()

                                    )

                                    .build(),

                                ButtonBuilder.create().text("Large iPad Dark Grey").id("ipad-dark-grey").build(),

                                ButtonBuilder.create().text("Large iPad Grey").id("ipad-grey").build(),

                                ButtonBuilder.create().text("OSX Lion (Default)").id("lion-default").build(),

                                ButtonBuilder.create().text("OSX Lion").id("lion").build(),

                                ButtonBuilder.create().text("Windows 7 (Default)").id("windows7-default").build(),

                                ButtonBuilder.create().text("Windows 7").id("windows7").build()

                            )

                            .build()

                    )

                    .center(

                        VBoxBuilder.create()

                            .spacing(10)

                            .padding(new Insets(20))

                            .alignment(Pos.CENTER)

                            .style("-fx-background-color: #373737;")

                            .children(

                                ButtonBuilder.create().text("Green").id("green").build(),

                                ButtonBuilder.create().text("Round Red").id("round-red").build(),

                                ButtonBuilder.create().text("Bevel Grey").id("bevel-grey").build(),

                                ButtonBuilder.create().text("Glass Grey").id("glass-grey").build(),

                                ButtonBuilder.create().text("Shiny Orange").id("shiny-orange").build(),

                                ButtonBuilder.create().text("DARK BLUE").id("dark-blue").build(),

                                ButtonBuilder.create().text("Record Sales").id("record-sales").build(),

                                ButtonBuilder.create().text("Rich Blue").id("rich-blue").build(),

                                ButtonBuilder.create().text("Big Yellow").id("big-yellow").build(),

                                ToolBarBuilder.create()

                                    .id("iphone-toolbar")

                                    .items(

                                        ButtonBuilder.create().text("iPhone").id("iphone").build()

                                    )

                                    .build(),

                                ButtonBuilder.create().text("Large iPad Dark Grey").id("ipad-dark-grey").build(),

                                ButtonBuilder.create().text("Large iPad Grey").id("ipad-grey").build(),

                                ButtonBuilder.create().text("OSX Lion (Default)").id("lion-default").build(),

                                ButtonBuilder.create().text("OSX Lion").id("lion").build(),

                                ButtonBuilder.create().text("Windows 7 (Default)").id("windows7-default").build(),

                                ButtonBuilder.create().text("Windows 7").id("windows7").build()

                            )

                            .build()

                    )

                .build()

            )

            .build());

        primaryStage.show();

    }

}

.root {

    -fx-font-size: 16px;

}

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

}