文档章节

Styling FX Buttons with CSS

铂金小鸟
 铂金小鸟
发布于 2014/06/04 23:46
字数 872
阅读 82
收藏 0

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

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(#eaf6fd0%,#d9f0fc49%,#bee6fd50%,#a7d9f5100%);
    -fx-background-insets:0,1,2;
    -fx-background-radius:3,2,1;
    -fx-padding:330330;
    -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(center50%-40%, radius200%,#b8ee3645%,#80c80050%);
    -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(#fcfcfc0%,#d9d9d920%,#d6d6d6100%),
        linear-gradient(#dddddd0%,#f6f6f650%);
    -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(#d6d6d650%,white100%),
        radial-gradient(center50%-40%, radius200%,#e6e6e645%, 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(#ffe6570%,#f8c20250%,#eea10b100%),
        linear-gradient(from0%0%to15%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:10201020;
}
#dark-blue{
    -fx-background-color:
        #090a0c,
        linear-gradient(#38424b0%,#1f242920%,#191d22100%),
        linear-gradient(#20262b,#191d22),
        radial-gradient(center50%0%, radius100%, 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:10201020;
}
#dark-blueText {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) ,1,0.0,0,1);
}
#record-sales {
    -fx-padding:8151515;
    -fx-background-insets:0,0050,0060,0070;
    -fx-background-radius:8;
    -fx-background-color:
        linear-gradient(from0%93%to0%100%,#a343130%,#903b12100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center50%50%, radius100%,#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(from0%93%to0%100%,#a343130%,#903b12100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center50%50%, radius100%,#ea7f4b,#c54e2c);
}
#record-sales:pressed {
    -fx-padding:10151315;
    -fx-background-insets:2000,2030,2040,2050;
}
#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:12301230;
    -fx-text-fill:white;
    -fx-font-size:12px;
}
#rich-blueText {
    -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(#f9f2d60%,#f4e5bc20%,#e6c75d80%,#e2c045100%),
        linear-gradient(#f6ebbe,#e6c34d);
    -fx-background-insets:0,9989,9,10,11;
    -fx-background-radius:50;
    -fx-padding:15301530;
    -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(#98a8bd0%,#8195af25%,#6d86a4100%);
}
#iphone {
    -fx-background-color:
        #a6b5c9,
        linear-gradient(#3038420%,#3e557720%,#375074100%),
        linear-gradient(#768aa50%,#849cbb5%,#5877a250%,#486a9a51%,#4a6c9b100%);
    -fx-background-insets:00-10,0,1;
    -fx-background-radius:5,5,4;
    -fx-padding:730730;
    -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(#6868680%,#23272325%,#37383775%,#757575100%),
        linear-gradient(#020b02,#3a3a3a),
        linear-gradient(#9d9e9d0%,#6b6a6b20%,#34353480%,#242424100%),
        linear-gradient(#8a8a8a0%,#6b6a6b20%,#34353480%,#262626100%),
        linear-gradient(#7777770%,#60606050%,#50525051%,#2a2b2a100%);
    -fx-background-insets:0,1,4,5,6;
    -fx-background-radius:9,8,5,4,3;
    -fx-padding:15301530;
    -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(#6868680%,#23272325%,#37383775%,#757575100%),
        linear-gradient(#020b02,#3a3a3a),
        linear-gradient(#b9b9b90%,#c2c2c220%,#afafaf80%,#c8c8c8100%),
        linear-gradient(#f5f5f50%,#dbdbdb50%,#cacaca51%,#d7d7d7100%);
    -fx-background-insets:0,1,4,5;
    -fx-background-radius:9,8,5,4;
    -fx-padding:15301530;
    -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(#e4fbff0%,#cee6fb10%,#a5d3fb50%,#88c6fb51%,#d5faff100%);
    -fx-background-insets:00-10,0,1;
    -fx-background-radius:5,5,4;
    -fx-padding:330330;
    -fx-text-fill:#242d35;
    -fx-font-size:14px;
}
#lion {
    -fx-background-color:
        rgba(0,0,0,0.08),
        linear-gradient(#9a9a9a,#909090),
        linear-gradient(white0%,#f3f3f350%,#ececec51%,#f2f2f2100%);
    -fx-background-insets:00-10,0,1;
    -fx-background-radius:5,5,4;
    -fx-padding:330330;
    -fx-text-fill:#242d35;
    -fx-font-size:14px;
}
#windows7-default{
    -fx-background-color:
        #3c7fb1,
        linear-gradient(#fafdfe,#e8f5fc),
        linear-gradient(#eaf6fd0%,#d9f0fc49%,#bee6fd50%,#a7d9f5100%);
    -fx-background-insets:0,1,2;
    -fx-background-radius:3,2,1;
    -fx-padding:330330;
    -fx-text-fill:black;
    -fx-font-size:14px;
}
#windows7{
    -fx-background-color:
        #707070,
        linear-gradient(#fcfcfc,#f3f3f3),
        linear-gradient(#f2f2f20%,#ebebeb49%,#dddddd50%,#cfcfcf100%);
    -fx-background-insets:0,1,2;
    -fx-background-radius:3,2,1;
    -fx-padding:330330;
    -fx-text-fill:black;
    -fx-font-size:14px;
}



本文转载自:http://fxexperience.com/2011/12/styling-fx-buttons-with-css/

共有 人打赏支持
铂金小鸟

铂金小鸟

粉丝 266
博文 11
码字总数 4041
作品 1
闵行
高级程序员
私信 提问
25个有用的CSS网格框架

本文作者SloDive,是名经验丰富的设计师,喜欢在各个领域寻求“美好”的事物。自然其整理推荐的这25个CSS网格框架也不会差。 一个CSS框架可以支持大多数的复杂布局,以助加快开发进程。CSS网...

老枪
2011/06/30
5.7K
0
Bootstrap v4.0.0-alpha.5 发布,大量更新

Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格...

局长
2016/10/20
5.3K
11
使用CSS来美化你的javafx滚动条

ScrollBar parts CSS information In the above picture there are four main part of ScrollBar . increment thumb track decrement Now in this post we are going to just play with only......

一号男嘉宾
2015/01/13
0
4
推荐11款jQuery开发的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

gbin1
2011/07/02
277
2
11 款 jQuery 的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

小编辑
2011/07/13
2.7K
9

没有更多内容

加载失败,请刷新页面

加载更多

什么是自然语言处理技术

自然语言处理(NLP)是计算机科学,人工智能,语言学关注计算机和人类(自然)语言之间的相互作用的领域。自然语言处理是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计...

本宫没空2
17分钟前
2
0
移动端关闭虚拟键盘

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()方法...

niuhongxia
17分钟前
2
0
Ubuntu18.04安装RabbitMQ(正确安装)

1、安装erlang 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang-nox 2、安装Rabbitmq 更新源 sudo apt-get update 安装 sudo apt-get ins...

hansonwong
27分钟前
2
0
如何在以太坊开发发行自己的ERC-20数字货币

今天我将向你展示如何在以太坊区块链上开发你自己的加密货币并将其出售!我将向你展示如何使用以太坊智能合约逐步创建自己的ERC-20代币和众筹销售,如何测试智能合约,如何将智能合约部署到以...

geek12345
27分钟前
1
0
Vlock用于有多个用户访问控制台的共享 Linux 系统

当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么。如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统。 ...

linuxprobe16
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部