文档章节

Styling FX Buttons with CSS

铂金小鸟
 铂金小鸟
发布于 2014/06/04 23:46
字数 872
阅读 76
收藏 0
点赞 0
评论 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/

共有 人打赏支持
铂金小鸟

铂金小鸟

粉丝 264
博文 11
码字总数 4041
作品 1
闵行
高级程序员
JavaFX2.1布局

1使用内置的布局Panes A JavaFX application can manually lay out the UI by setting the position and size properties for each UI element. However, an easier option is to make use ......

东北·赵本山 ⋅ 2012/05/03 ⋅ 0

25个有用的CSS网格框架

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

老枪 ⋅ 2011/06/30 ⋅ 0

Bootstrap v4.0.0-alpha.5 发布,大量更新

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

局长 ⋅ 2016/10/20 ⋅ 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 ⋅ 4

推荐11款jQuery开发的复选框和单选框美化插件

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

gbin1 ⋅ 2011/07/02 ⋅ 2

11 款 jQuery 的复选框和单选框美化插件

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

小编辑 ⋅ 2011/07/13 ⋅ 9

ionic 2.0.0-alpha.54 发布,移动应用框架

ionic 2.0.0-alpha.54 发布,更新如下: Bug 修复 alert: add checkbox icon for iOS using Sass variables from regular checkbox (68819f0), closes #5253 badge: change default badge co......

oschina ⋅ 2016/02/03 ⋅ 7

11个jQuery表单元素美化插件

因为浏览器兼容性的原因,表单元素往往是整个网页设计过程中最难以美化的,尤其是单选按钮、下拉选择框和复选框。不过我们可以通过jquery来美化它样。下面为大家推荐11个简单易用的jQurey插件...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

最热最新的100个CSS3 教程

来自http://latenightstop.com/?p=1562的最热最新的100个CSS3 教程。 Menus tutorials Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box na......

老枪 ⋅ 2011/08/22 ⋅ 1

Ionic 2.0.0-beta.5 发布,HTML5 移动应用框架

Ionic 2.0.0-beta.5 发布了,Ionic Framework 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架。 Bug 修复: alert: remove justify content from b...

oschina ⋅ 2016/04/21 ⋅ 10

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 49分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 52分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 今天 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 今天 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部