diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
index d2e88f267080c..6f6ab261bd6c3 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
@@ -10,7 +10,6 @@ import { SubscriptionPlan, SubscriptionStatus } from '@affine/graphql';
 import { Trans, useI18n } from '@affine/i18n';
 import { DoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
@@ -424,15 +423,13 @@ const ResumeButton = () => {
 
   return (
     <ResumeAction open={open} onOpenChange={setOpen}>
-      <Button
-        className={styles.resumeAction}
-        onClick={handleClick}
-        style={assignInlineVars({
-          '--default-content': t['com.affine.payment.current-plan'](),
-          '--hover-content': t['com.affine.payment.resume-renewal'](),
-        })}
-      >
-        <span className={styles.resumeActionContent} />
+      <Button className={styles.resumeAction} onClick={handleClick}>
+        <span data-show-hover="true" className={clsx(styles.resumeContent)}>
+          {t['com.affine.payment.resume-renewal']()}
+        </span>
+        <span data-show-hover="false" className={clsx(styles.resumeContent)}>
+          {t['com.affine.payment.current-plan']()}
+        </span>
       </Button>
     </ResumeAction>
   );
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
index e6967100bdd59..634b91108f653 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
@@ -179,14 +179,16 @@ export const planAction = style({
   width: '100%',
 });
 export const resumeAction = style([planAction, {}]);
-export const resumeActionContent = style({
-  ':after': {
-    content: 'var(--default-content)',
-  },
+export const resumeContent = style({
   selectors: {
-    [`${resumeAction}:hover &:after`]: {
-      content: 'var(--hover-content)',
-    },
+    [`&[data-show-hover="true"], ${resumeAction}:hover &[data-show-hover="false"]`]:
+      {
+        display: 'none',
+      },
+    [`&[data-show-hover="false"], ${resumeAction}:hover &[data-show-hover="true"]`]:
+      {
+        display: 'block',
+      },
   },
 });
 export const planBenefits = style({