diff --git a/app/components/common/Button/Button.css.ts b/app/components/common/Button/Button.css.ts
index 9e8f485..20a3199 100644
--- a/app/components/common/Button/Button.css.ts
+++ b/app/components/common/Button/Button.css.ts
@@ -1,7 +1,7 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { Breakpoint } from '@/constants/style';
 import { themeVars } from '@/styles/theme.css';
-import { getMediaQuery } from '@/utils/style';
+import { getMediaQuery, rgba } from '@/utils/style';
 
 export const buttonBase = style({
   cursor: 'pointer',
@@ -33,10 +33,10 @@ export const buttonStyleByVariant = styleVariants({
     borderColor: themeVars.color.primary.normal.hex,
     backgroundColor: 'transparent',
     ':hover': {
-      backgroundColor: `rgba(${themeVars.color.primary.normal.rgb}, 0.1)`,
+      backgroundColor: rgba(themeVars.color.primary.normal.rgb, 0.1),
     },
     ':active': {
-      backgroundColor: `rgba(${themeVars.color.primary.normal.rgb}, 0.2)`,
+      backgroundColor: rgba(themeVars.color.primary.normal.rgb, 0.2),
     },
     ':disabled': {
       backgroundColor: 'transparent',
diff --git a/app/utils/style.ts b/app/utils/style.ts
index 4ecc630..b34ad17 100644
--- a/app/utils/style.ts
+++ b/app/utils/style.ts
@@ -30,3 +30,6 @@ export const getRGBFromHex = (hex: string) => {
   }
   return [aRgbHex[0], aRgbHex[1], aRgbHex[2]].map((item) => parseInt(item, 16));
 };
+
+export const rgba = (cssVar: string, alpha: number) =>
+  `rgba(${cssVar}, ${alpha})`;