diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index e7143c819d..be82c2c4b9 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -968,6 +968,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
+      type="button"
+    >
+      <span>
+        type="text" (Default)
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 84e1d4b9da..f708030719 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -952,6 +952,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
+      type="button"
+    >
+      <span>
+        type="text" (Default)
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
diff --git a/components/button/demo/debug-color-variant.tsx b/components/button/demo/debug-color-variant.tsx
index 54a1c1a0b0..52217a2cbc 100644
--- a/components/button/demo/debug-color-variant.tsx
+++ b/components/button/demo/debug-color-variant.tsx
@@ -114,6 +114,22 @@ const App: React.FC = () => {
           <Button type="dashed">Dashed</Button>
         </ConfigProvider>
       </Flex>
+      <Flex gap="small" wrap>
+        <ConfigProvider
+          theme={{
+            components: {
+              Button: {
+                textTextColor: '#f60',
+                textTextHoverColor: '#722ed1',
+                textTextActiveColor: '#0f0',
+                textHoverBg: '#000',
+              },
+            },
+          }}
+        >
+          <Button type="text">type="text" (Default)</Button>
+        </ConfigProvider>
+      </Flex>
     </Flex>
   );
 };
diff --git a/components/button/style/variant.ts b/components/button/style/variant.ts
index 3ba729c82d..4efed400dd 100644
--- a/components/button/style/variant.ts
+++ b/components/button/style/variant.ts
@@ -239,6 +239,13 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
             [varName('bg-color-active')]: token.defaultActiveBg,
           },
 
+          [`&${componentCls}-variant-text`]: {
+            [varName('text-color')]: token.textTextColor,
+            [varName('text-color-hover')]: token.textTextHoverColor,
+            [varName('text-color-active')]: token.textTextActiveColor,
+            [varName('bg-color-hover')]: token.textHoverBg,
+          },
+
           [`&${componentCls}-background-ghost`]: {
             [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
               [varName('text-color')]: token.defaultGhostColor,