diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
index e67b38b25f..08c3d780af 100644
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@@ -57,7 +57,7 @@ class TransButton extends React.Component<TransButtonProps> {
     return (
       <div
         role="button"
-        tabIndex={-1}
+        tabIndex={0}
         ref={this.setRef}
         {...this.props}
         onKeyDown={this.onKeyDown}
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index a3b6c20dbe..52fbb83d4f 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -42,7 +42,9 @@ const renderBack = (
             }
           }}
         >
-          <TransButton aria-label={back}>{backIcon}</TransButton>
+          <TransButton className={`${prefixCls}-back-icon-button`} aria-label={back}>
+            {backIcon}
+          </TransButton>
           <Divider type="vertical" />
         </div>
       )}
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index 64a1544b88..62ba043b09 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -20,8 +20,10 @@
     font-size: 16px;
     line-height: 100%;
     cursor: pointer;
-    i:hover {
-      color: @primary-color;
+    &-button {
+      .operation-unit();
+
+      color: @text-color;
     }
   }
 
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
index 44c88a764b..49a5eb77e0 100644
--- a/components/style/mixins/index.less
+++ b/components/style/mixins/index.less
@@ -6,3 +6,4 @@
 @import 'iconfont';
 @import 'motion';
 @import 'reset';
+@import 'operationUnit';
diff --git a/components/style/mixins/operationUnit.less b/components/style/mixins/operationUnit.less
new file mode 100644
index 0000000000..03ee5f93d1
--- /dev/null
+++ b/components/style/mixins/operationUnit.less
@@ -0,0 +1,18 @@
+@import '../../style/themes/default';
+
+.operation-unit() {
+  color: @link-color;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:focus,
+  &:hover {
+    color: @link-hover-color;
+  }
+
+  &:active {
+    color: @link-active-color;
+  }
+}
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 4fbc2e38ff..dfa8d750a4 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -30,23 +30,6 @@
   .typography-title(@heading-4-size, 1.4);
 }
 
-.operation-unit() {
-  color: @link-color;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:focus,
-  &:hover {
-    color: @link-hover-color;
-  }
-
-  &:active {
-    color: @link-active-color;
-  }
-}
-
 // =============== Basic ===============
 .@{typography-prefix-cls} {
   color: @text-color;