diff --git a/app/src/assets/scss/_button.scss b/app/src/assets/scss/_button.scss
index 10cb9162c..c11c29f67 100644
--- a/app/src/assets/scss/_button.scss
+++ b/app/src/assets/scss/_button.scss
@@ -103,6 +103,21 @@
     }
   }
 
+  &--error {
+    color: var(--b3-card-error-color);
+    background-color: var(--b3-card-error-background);
+  }
+
+  &--warning {
+    color: var(--b3-card-warning-color);
+    background-color: var(--b3-card-warning-background);
+  }
+
+  &--success {
+    color: var(--b3-card-success-color);
+    background-color: var(--b3-card-success-background);
+  }
+
   &:disabled {
     opacity: 0.37;
     cursor: not-allowed;
diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index d51e76e6a..e5908b7ae 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -30,13 +30,13 @@ export const openCard = () => {
     <div class="b3-dialog__cardblock b3-dialog__cardblock--show fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
     <div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">${window.siyuan.languages.noDueCard}</div>
     <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}" style="flex-wrap: wrap" data-type="action">
-        <button data-type="-1" class="b3-button">Show (S)</button>
+        <button data-type="-1" class="b3-button b3-button--outline">Show (S)</button>
         <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
-        <button data-type="0" class="b3-button">Again (A)</button>
+        <button data-type="0" class="b3-button b3-button--error">Again (A)</button>
         <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
-        <button data-type="1" class="b3-button">Hard (H)</button>
+        <button data-type="1" class="b3-button b3-button--warning">Hard (H)</button>
         <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
-        <button data-type="2" class="b3-button">Good (G)</button>
+        <button data-type="2" class="b3-button b3-button--success">Good (G)</button>
         <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="3" class="b3-button">Easy (E)</button>
     </div>