Add button focus style, fix #1022

style/mixins/button.less

@@ -9,23 +9,21 @@
 .button-variant(@color; @background; @border) {
   .button-color(@color; @background; @border);
 
-  &:hover {
+  &:hover,
+  &:focus {
     .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
   }
   &:active,
   &.active {
     .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
   }
-  &:active,
-  &.active {
-    background-image: none;
-  }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
     &,
     &:hover,
+    &:focus,
     &:active,
     &.active {
       .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
@@ -128,6 +126,7 @@
   .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
 
   &:hover,
+  &:focus,
   &:active,
   &.active {
     color: @btn-primary-color;
@@ -138,7 +137,8 @@
 .btn-default() {
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 
-  &:hover {
+  &:hover,
+  &:focus {
     .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
   }
   &:active,
@@ -151,7 +151,8 @@
 .btn-ghost() {
   .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
 
-  &:hover {
+  &:hover,
+  &:focus {
     .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
   }
   &:active,
@@ -165,7 +166,8 @@
   .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
   border-style: dashed;
 
-  &:hover {
+  &:hover,
+  &:focus {
     .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
   }
   &:active,
@@ -211,6 +213,7 @@
   }
 
   &:not([disabled]):hover,
+  &:not([disabled]):focus,
   &:not([disabled]):active,
   &:not([disabled]).active {
     > .@{iconfont-css-prefix} {
@@ -220,6 +223,7 @@
   }
 
   &:not([disabled]):hover:before,
+  &:not([disabled]):focus:before,
   &:not([disabled]):active:before,
   &:not([disabled]).active:before {
     .opacity(1);