diff --git a/apps/web/app/test/page.tsx b/apps/web/app/test/page.tsx
deleted file mode 100644
index 7f2d9f9b..00000000
--- a/apps/web/app/test/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { Button, Icon } from '@sds/components';
-
-const Page = () => {
-  return (
-    <Button size="large" leftDecor={<Icon name="upload" />}>
-      단톡방에 공유하기
-    </Button>
-  );
-};
-export default Page;
diff --git a/packages/core/sds/src/components/Button/styles.ts b/packages/core/sds/src/components/Button/styles.ts
index 6255bd84..0c4e9d77 100644
--- a/packages/core/sds/src/components/Button/styles.ts
+++ b/packages/core/sds/src/components/Button/styles.ts
@@ -85,13 +85,20 @@ export const buttonCss = css({
 
   cursor: 'pointer',
 
-  '&:hover': {
-    backgroundColor: `var(${buttonHoverColorVar})`,
-  },
-
   '&:disabled': {
     cursor: 'not-allowed',
   },
+
+  '@media (hover: none) and (pointer: coarse)': {
+    '&:not(:disabled):active': {
+      backgroundColor: `var(${buttonHoverColorVar})`,
+    },
+  },
+  '@media (hover: hover) and (pointer: fine)': {
+    '&:not(:disabled):hover': {
+      backgroundColor: `var(${buttonHoverColorVar})`,
+    },
+  },
 });
 
 export const leftDecorCss = css({