diff --git a/package-lock.json b/package-lock.json
index a2e3b32..08727f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+        "class-variance-authority": "^0.7.1",
         "gsap": "^3.13.0",
         "next": "15.5.3",
         "react": "19.1.0",
@@ -4521,6 +4522,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -4564,7 +4577,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
diff --git a/package.json b/package.json
index cc5c7a0..a436a5a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
     "next": "15.5.3",
     "react": "19.1.0",
diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 5609c23..4720dc2 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import Button from '@/shared/components/Button';
+import Button from '@/shared/components/button/Button';
+import TextButton from '@/shared/components/button/TextButton';
 import ConfirmPop from '@/shared/components/ModalPop/ConfirmPop';
 import ModalLayout from '@/shared/components/ModalPop/ModalLayout';
 import { useState } from 'react';
@@ -43,11 +44,23 @@ function Page() {
 
         <div className="space-y-2">
           <h3 className="text-xl font-medium border-b pb-1">Button</h3>
-          <Button>버튼</Button>
-          <Button variant="purple" size="sm">
+          <Button type="button">버튼</Button>
+          <Button color="purple" type="button">
             Button
           </Button>
-          <Button variant="disable">button</Button>
+          <Button disabled>button</Button>
+          <Button type="button" size="sm">
+            버튼
+          </Button>
+          <Button type="button" size="sm" color="purple">
+            버튼
+          </Button>
+          <Button size="sm" disabled>
+            버튼
+          </Button>
+
+          <TextButton>텍스트 버튼</TextButton>
+          <TextButton size="sm">텍스트 버튼</TextButton>
         </div>
       </div>
 
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 0000000..defae75
--- /dev/null
+++ b/src/components/index.tsx
@@ -0,0 +1,4 @@
+function index() {
+  return <button>버튼</button>;
+}
+export default index;
diff --git a/src/shared/components/Button.tsx b/src/shared/components/Button.tsx
deleted file mode 100644
index 4d1e74c..0000000
--- a/src/shared/components/Button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ButtonHTMLAttributes, Ref } from 'react';
-
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: 'default' | 'sm';
-  variant?: 'default' | 'purple' | 'disable';
-  children: string;
-  ref?: Ref<HTMLButtonElement | null>;
-}
-
-const SIZE = {
-  default: 'py-1 px-2 h-10 rounded-lg text-base font-bold min-w-25 cursor-pointer flex-center',
-  sm: 'py-1 px-2 rounded-lg text-base font-bold min-w-20 cursor-pointer flex-center',
-};
-
-const VARIANT = {
-  default: 'bg-secondary',
-  purple: 'bg-tertiary text-bold text-secondary',
-  disable: 'bg-gray',
-};
-
-function Button({ size = 'default', variant = 'default', children, ref, ...rest }: Props) {
-  return (
-    <button className={`${SIZE[size]} ${VARIANT[variant]}`} {...rest} ref={ref}>
-      {children}
-    </button>
-  );
-}
-export default Button;
diff --git a/src/shared/components/button/Button.tsx b/src/shared/components/button/Button.tsx
new file mode 100644
index 0000000..83b06dd
--- /dev/null
+++ b/src/shared/components/button/Button.tsx
@@ -0,0 +1,65 @@
+import tw from '@/shared/utills/tw';
+import { cva } from 'class-variance-authority';
+import { ButtonHTMLAttributes, Ref } from 'react';
+
+// 버튼속성을 다 받을 수 있게
+// 클래스네임, 기본적인건 다 props로 받을 수 있게
+// 버튼 보여질 경우 arial hidden을 넣고 아이콘의경우 aria-label넣는다
+// 속성값에 disabled넣었을때 알어서 바뀔수 있게 할 수 있게 수정하기.
+// Ref가 잘 되는지 확인해보기
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'default' | 'sm';
+  color?: 'default' | 'purple';
+  ref?: Ref<HTMLButtonElement | null>;
+  disable?: boolean;
+  type?: 'submit' | 'button';
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const ButtonClass = cva(
+  `
+  py-1 px-2 rounded-lg text-base font-bold flex-center text-bold text-navy duration-300 disabled:bg-gray disabled:cursor-not-allowed disabled:text-primary
+  `,
+  {
+    variants: {
+      color: {
+        default: 'bg-secondary text-navy enabled:hover:inset-shadow-black',
+        purple: 'bg-tertiary text-secondary enabled:hover:inset-shadow-white',
+      },
+      size: {
+        default: 'h-10, min-w-25',
+        sm: 'h-8 min-w-20',
+      },
+    },
+    defaultVariants: {
+      color: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  size,
+  type = 'button',
+  color,
+  children,
+  className,
+  ref,
+  disabled,
+  ...rest
+}: Props) {
+  return (
+    <button
+      className={tw(ButtonClass({ color, size, className }))}
+      type={type}
+      ref={ref}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+export default Button;
diff --git a/src/shared/components/button/TextButton.tsx b/src/shared/components/button/TextButton.tsx
new file mode 100644
index 0000000..acdee1f
--- /dev/null
+++ b/src/shared/components/button/TextButton.tsx
@@ -0,0 +1,31 @@
+import { Ref } from 'react';
+
+interface Props {
+  size?: 'default' | 'sm';
+  type?: 'button' | 'submit';
+  ref?: Ref<HTMLButtonElement | null>;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const SIZE = {
+  default: 'text-base flex flex-col justfy-center',
+  sm: 'text-sm flex flex-col justfy-center',
+};
+
+function TextButton({
+  type = 'button',
+  children,
+  className,
+  ref,
+  size = 'default',
+  ...rest
+}: Props) {
+  return (
+    <button className={`${SIZE[size]} ${className}`} type={type} ref={ref} {...rest}>
+      {children}
+      <div className="h-[1px] w-100% bg-white"></div>
+    </button>
+  );
+}
+export default TextButton;
diff --git a/src/shared/styles/_theme.css b/src/shared/styles/_theme.css
index 0a6985b..fae098c 100644
--- a/src/shared/styles/_theme.css
+++ b/src/shared/styles/_theme.css
@@ -13,5 +13,10 @@
   --color-white: #ffffff;
   --color-black: #0f172a;
   --color-bg-pop: #3d3d3d;
+  --color-navy:#1f2544;
   --font-serif: 'Hahmlet', serif;
+
+--inset-shadow-black: inset 0 2px 6px rgba(0, 0, 0, 0.3);
+--inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.4);
+
 }
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index d28fcaf..1a65cbf 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -12,5 +12,7 @@
   'NanumSquareNeo',sans-serif;
   line-height: 1.5;
   font-weight: 500;
+  color:#fff;
+  background-color: var(--color-primary)
 }