深浅主题下的幽灵按钮

demo/js/base/button/demo.button.js

@@ -182,13 +182,28 @@ Demo.Button = BI.inherit(BI.Widget, {
                     text: "文字按钮",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）",
+                    ghost: true,
+                    height: 30
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）灰化",
+                    disabled: true,
+                    ghost: true,
+                    height: 30
+                }
             }
         ];
-        BI.each(items, function (i, item) {
-            item.el.handler = function () {
-                BI.Msg.alert("按钮", this.options.text);
-            };
-        });
+        // BI.each(items, function (i, item) {
+        //     item.el.handler = function () {
+        //         BI.Msg.alert("按钮", this.options.text);
+        //     };
+        // });
         return {
             type: "bi.left",
             vgap: 100,

dist/base.css

@@ -844,6 +844,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -856,6 +861,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -1016,6 +1036,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -1028,6 +1079,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {

dist/base.js

@@ -16520,7 +16520,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -16600,6 +16600,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }

dist/bundle.css

@@ -2891,6 +2891,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -2903,6 +2908,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -3063,6 +3083,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -3075,6 +3126,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {

dist/bundle.js

@@ -42572,7 +42572,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -42652,6 +42652,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }

dist/demo.js

@@ -201,13 +201,28 @@ $(function () {
                     text: "文字按钮",
                     height: 30
                 }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）",
+                    ghost: true,
+                    height: 30
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "幽灵按钮（common）灰化",
+                    disabled: true,
+                    ghost: true,
+                    height: 30
+                }
             }
         ];
-        BI.each(items, function (i, item) {
-            item.el.handler = function () {
-                BI.Msg.alert("按钮", this.options.text);
-            };
-        });
+        // BI.each(items, function (i, item) {
+        //     item.el.handler = function () {
+        //         BI.Msg.alert("按钮", this.options.text);
+        //     };
+        // });
         return {
             type: "bi.left",
             vgap: 100,

dist/fineui.css

@@ -2891,6 +2891,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -2903,6 +2908,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -3063,6 +3083,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -3075,6 +3126,36 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}
 
 .bi-single-select-icon-text-item:active .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {

dist/fineui.js

@@ -44336,7 +44336,7 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -44416,6 +44416,9 @@ BI.shortcut("bi.image_button", BI.ImageButton);(function ($) {
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }

src/base/single/button/buttons/button.js

@@ -15,7 +15,7 @@
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button",
                 minWidth: (props.block === true || props.clear === true) ? 0 : 90,
-                shadow: props.clear !== true,
+                shadow: props.clear !== true && props.ghost !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
                 iconCls: "",
@@ -95,6 +95,9 @@
             if (o.clear === true) {
                 this.element.addClass("clear");
             }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth + "px"});
             }

src/css/base/single/button/button.css

@@ -31,6 +31,11 @@ body .bi-button.clear:active,
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
+body .bi-button.ghost,
+#body .bi-button.ghost {
+  font-size: inherit;
+  background-color: transparent;
+}
 body .bi-button.button-common,
 #body .bi-button.button-common,
 body .bi-button.button-common .b-font:before,
@@ -43,6 +48,21 @@ body .bi-button.button-common.clear .b-font:before,
 #body .bi-button.button-common.clear .b-font:before {
   color: #3685f2;
 }
+body .bi-button.button-common.ghost,
+#body .bi-button.button-common.ghost,
+body .bi-button.button-common.ghost .b-font:before,
+#body .bi-button.button-common.ghost .b-font:before {
+  color: #3685f2;
+}
+body .bi-button.button-common.ghost:hover,
+#body .bi-button.button-common.ghost:hover {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+body .bi-button.button-common.ghost:active,
+#body .bi-button.button-common.ghost:active {
+  background-color: #3077DA;
+}
 body .bi-button.button-ignore,
 #body .bi-button.button-ignore {
   background-color: #ffffff;
@@ -203,6 +223,37 @@ body .bi-button.button-ignore.disabled.clear:active,
   opacity: 1;
   filter: alpha(opacity=100);
 }
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost {
+  background: transparent !important;
+  border-color: #3685f2 !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+body .bi-button.button-common.disabled.ghost,
+#body .bi-button.button-common.disabled.ghost,
+body .bi-button.button-success.disabled.ghost,
+#body .bi-button.button-success.disabled.ghost,
+body .bi-button.button-warning.disabled.ghost,
+#body .bi-button.button-warning.disabled.ghost,
+body .bi-button.button-ignore.disabled.ghost,
+#body .bi-button.button-ignore.disabled.ghost,
+body .bi-button.button-common.disabled.ghost .b-font:before,
+#body .bi-button.button-common.disabled.ghost .b-font:before,
+body .bi-button.button-success.disabled.ghost .b-font:before,
+#body .bi-button.button-success.disabled.ghost .b-font:before,
+body .bi-button.button-warning.disabled.ghost .b-font:before,
+#body .bi-button.button-warning.disabled.ghost .b-font:before,
+body .bi-button.button-ignore.disabled.ghost .b-font:before,
+#body .bi-button.button-ignore.disabled.ghost .b-font:before {
+  color: #3685f2 !important;
+}
 .bi-basic-button.button-common .bi-button-mask,
 .bi-basic-button.button-success .bi-button-mask,
 .bi-basic-button.button-warning .bi-button-mask {
@@ -215,3 +266,33 @@ body .bi-button.button-ignore.disabled.clear:active,
   filter: alpha(opacity=20);
   background-color: #1a1a1a;
 }
+.bi-theme-dark body .bi-button.button-common.ghost,
+.bi-theme-dark #body .bi-button.button-common.ghost,
+.bi-theme-dark body .bi-button.button-common.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.ghost .b-font:before {
+  color: #ffffff;
+  border-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:hover,
+.bi-theme-dark #body .bi-button.button-common.ghost:hover {
+  color: #3d4d66;
+  background-color: #ffffff;
+}
+.bi-theme-dark body .bi-button.button-common.ghost:active,
+.bi-theme-dark #body .bi-button.button-common.ghost:active {
+  background-color: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost {
+  background: transparent !important;
+  border-color: #ffffff !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.bi-theme-dark body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost,
+.bi-theme-dark body .bi-button.button-common.disabled.ghost .b-font:before,
+.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
+  color: #ffffff !important;
+}

src/less/base/single/button/button.less

@@ -21,6 +21,10 @@ body .bi-button, #body .bi-button {
       .opacity(0.75);
     }
   }
+  &.ghost {
+    font-size: inherit;
+    background-color: transparent;
+  }
   &.button-common {
     &, & .b-font:before {
       color: @color-bi-text;
@@ -28,6 +32,18 @@ body .bi-button, #body .bi-button {
     &.clear, &.clear .b-font:before {
       color: @color-bi-text-highlight;
     }
+    &.ghost{
+      &, & .b-font:before{
+        color: @color-bi-text-highlight;
+      }
+      &:hover{
+        color: @color-bi-text;
+        background-color: @color-bi-background-highlight;
+      }
+      &:active{
+        background-color: @color-bi-background-dark-highlight;
+      }
+    }
   }
   &.button-ignore {
     & {
@@ -106,6 +122,14 @@ body .bi-button, #body .bi-button {
         .opacity(1);
       }
     }
+    &.ghost {
+      &, & .b-font:before {
+        color: @color-bi-text-highlight !important;
+      }
+      background: transparent !important;
+      border-color: @color-bi-text-highlight !important;
+      .opacity(0.5);
+    }
   }
 }
 
@@ -121,3 +145,33 @@ body .bi-button, #body .bi-button {
     background-color: @color-bi-button-mask;
   }
 }
+
+.bi-theme-dark {
+  body .bi-button, #body .bi-button {
+    &.button-common {
+      &.ghost{
+        &, & .b-font:before{
+          color: @color-bi-text;
+          border-color: @color-bi-border-default;
+        }
+        &:hover{
+          color: @color-bi-text-normal;
+          background-color: @color-bi-background-default;
+        }
+        &:active{
+          .background-color(@color-bi-background-default, 90%);
+        }
+      }
+    }
+    &.button-common.disabled{
+      &.ghost {
+        &, & .b-font:before {
+          color: @color-bi-text !important;
+        }
+        background: transparent !important;
+        border-color: @color-bi-border-default !important;
+        .opacity(0.5);
+      }
+    }
+  }
+}

src/less/lib/colors.less

@@ -60,6 +60,8 @@
 @color-bi-background-highlight: @background-color-highlight;
 //背景提亮色(浅)
 @color-bi-background-light-highlight: @background-color-light-highlight;
+//背景提亮色(深)
+@color-bi-background-dark-highlight: @font-color-dark-highlight;
 
 //黑色边框色
 @color-bi-border-black: @border-color-black;

src/less/lib/constant.less

@@ -25,6 +25,7 @@
 @font-color-gray: #999999;
 @font-color-white: #ffffff;//
 @font-color-highlight: #3685f2;
+@font-color-dark-highlight: #3077DA;
 @font-color-success: #5cb75d;
 @font-color-warning: #faaa39;//
 @font-color-negative: #ff4949;//