diff --git a/app/buttons/page.tsx b/app/buttons/page.tsx
index da2c721..a4ce874 100644
--- a/app/buttons/page.tsx
+++ b/app/buttons/page.tsx
@@ -62,6 +62,7 @@ const files = [
   "button-49",
   "button-50",
   "button-51",
+  "button-52",
 ];
 
 export default function Page() {
diff --git a/components/buttons/button-52.tsx b/components/buttons/button-52.tsx
new file mode 100644
index 0000000..b7a3bac
--- /dev/null
+++ b/components/buttons/button-52.tsx
@@ -0,0 +1,18 @@
+// Dependencies: pnpm install lucide-react
+
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+
+export default function Button52() {
+  return (
+    <Button className="group relative bg-primary text-primary-foreground hover:bg-primary/90">
+      Button
+      <ChevronRight
+        className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-2 group-hover:opacity-100"
+        size={16}
+        strokeWidth={2}
+        aria-hidden="true"
+      />
+    </Button>
+  );
+}