layout

src/app/(features)/alphabet/AlphabetCard.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
-import { IconClick, CircleToggleButton, CircleButton } from "@/components/ui/buttons";
+import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/components/ui/buttons";
 import { IMAGES } from "@/config/images";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { PageLayout } from "@/components/ui/PageLayout";
@@ -191,12 +191,12 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
           {/* 中间区域：随机按钮 */}
           <div className="flex gap-2 items-center">
             {isRandomMode && (
-              <button
+              <PrimaryButton
                 onClick={goToRandom}
-                className="px-4 py-2 rounded-full bg-[#35786f] text-white text-sm font-medium hover:bg-[#2d5f58] transition-colors"
+                className="rounded-full px-4 py-2 text-sm"
               >
                 {t("randomNext")}
-              </button>
+              </PrimaryButton>
             )}
           </div>