diff --git a/src/components/common/Buttons/BackToPostButton.jsx b/src/components/common/Buttons/BackToPostButton.jsx
index 1481dfb..572c81a 100644
--- a/src/components/common/Buttons/BackToPostButton.jsx
+++ b/src/components/common/Buttons/BackToPostButton.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function BackToPostButton({ moveLink, btnName }) {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/ButtonStyle.jsx b/src/components/common/Buttons/ButtonStyle.jsx
deleted file mode 100644
index 4dad6de..0000000
--- a/src/components/common/Buttons/ButtonStyle.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-export const ButtonCommon = styled.button`
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  gap: 1rem;
-  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
-  cursor: ${({ disabled }) => disabled && 'not-allowed'};
-`;
-
-const PrimaryBtn = styled(ButtonCommon)`
-  padding: 1.4rem 2.4rem;
-
-  // active 여부
-  &:hover:enabled {
-    background: var(--purple700);
-  }
-
-  &:active:enabled {
-    background: var(--purple800);
-  }
-
-  &:focus:enabled {
-    /* border: 2px solid var(--purple900); */
-    background: var(--purple800);
-  }
-`;
-
-export const Primary56 = styled(PrimaryBtn)`
-  padding: 1.4rem 2.4rem;
-  border-radius: 1.2rem;
-  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
-  /* Font/18 Bold */
-  color: var(--white);
-
-  /* Font/18 Bold */
-  font-family: Pretendard;
-  font-size: 1.8rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 2.8rem; /* 155.556% */
-  letter-spacing: -0.18px;
-`;
-
-export const Primary40 = styled(PrimaryBtn)`
-  border-radius: 0.6rem;
-  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
-  /* Font/16 Regular */
-`;
-
-export const Secondary = styled(ButtonCommon)`
-  padding: 0.7rem 1.6rem;
-
-  &:hover {
-    background: var(--gray300);
-  }
-
-  &:active {
-    background: var(--gray100);
-  }
-
-  &:focus {
-    border: 1px solid var(--gray500);
-  }
-`;
diff --git a/src/components/common/Buttons/DeleteRecipientButton.js b/src/components/common/Buttons/DeleteRecipientButton.js
index 40cf38c..e7c86d4 100644
--- a/src/components/common/Buttons/DeleteRecipientButton.js
+++ b/src/components/common/Buttons/DeleteRecipientButton.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import { deleteRecipient } from '../../../api/DeleteApi';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function DeleteRecipientButton() {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/EditButton.js b/src/components/common/Buttons/EditButton.js
index 62a2d03..7413936 100644
--- a/src/components/common/Buttons/EditButton.js
+++ b/src/components/common/Buttons/EditButton.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function EditButton() {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/EditMessageButton.js b/src/components/common/Buttons/EditMessageButton.js
index c25078e..3faa268 100644
--- a/src/components/common/Buttons/EditMessageButton.js
+++ b/src/components/common/Buttons/EditMessageButton.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function EditMessageButton({ messageID }) {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/PostButton.js b/src/components/common/Buttons/PostButton.js
index bf5212a..6dcab3a 100644
--- a/src/components/common/Buttons/PostButton.js
+++ b/src/components/common/Buttons/PostButton.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function PostButton({ onSubmit, btnDisable }) {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/PutPatchButton.jsx b/src/components/common/Buttons/PutPatchButton.jsx
index 5c433bd..9ca5c11 100644
--- a/src/components/common/Buttons/PutPatchButton.jsx
+++ b/src/components/common/Buttons/PutPatchButton.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function PutPatchButton({ onSubmit, btnDisable }) {
   const navigate = useNavigate();
diff --git a/src/components/common/Buttons/movePageButton.jsx b/src/components/common/Buttons/movePageButton.jsx
index a9f7efc..ab5b7df 100644
--- a/src/components/common/Buttons/movePageButton.jsx
+++ b/src/components/common/Buttons/movePageButton.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function MovePageButton({ moveLink, btnName }) {
   const navigate = useNavigate();
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index 309bd53..88d709f 100644
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { Outlined40 } from '../../styles/ButtonStyle';
 
 const StyledNav = styled.nav`
   width: 100%;
@@ -25,20 +26,8 @@ const StyledHeader = styled.div`
   }
 `;
 
-const ButtonContainer = styled.div`
-  button {
-    height: 40px;
-    border-radius: 6px;
-    padding: 8px 16px;
-    border: 1px solid #ccc;
-    background: #fff;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: -0.16px;
-    text-align: center;
-  }
-`;
+const Button = styled(Outlined40)``;
+
 const LogoURL = styled.a`
   display: flex;
   padding: 6px 0;
@@ -65,9 +54,7 @@ function Header({ showButton }) {
         </LogoURL>
         {showButton && (
           <Link to="/post">
-            <ButtonContainer>
-              <button type="button">롤링 페이퍼 만들기</button>
-            </ButtonContainer>
+            <Button>롤링 페이퍼 만들기</Button>
           </Link>
         )}
       </StyledHeader>
diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx
index e152695..942b5d7 100644
--- a/src/components/common/ModalWindow.jsx
+++ b/src/components/common/ModalWindow.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { Primary40 } from '../../styles/ButtonStyle';
 // import { useKakaoShare } from './useKakaoShare';
 
 const ModalBox = styled.div`
@@ -25,18 +26,8 @@ const ModalBody = styled.div`
   transform: translate(-50%, -30%);
 `;
 
-const CloseBtn = styled.button`
-  display: flex;
+const CloseBtn = styled(Primary40)`
   width: 120px;
-  padding: 7px 16px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  background: var(--purple600);
-  color: #fff;
-  font-size: 16px;
-  line-height: 26px; /* 162.5% */
-  letter-spacing: -0.16px;
   position: absolute;
   bottom: 40px;
 
diff --git a/src/components/modal/CardModal.jsx b/src/components/modal/CardModal.jsx
index 067dc45..de85cff 100644
--- a/src/components/modal/CardModal.jsx
+++ b/src/components/modal/CardModal.jsx
@@ -26,7 +26,6 @@ function CardModal({
 }) {
   const location = useLocation();
   const isEditRoute = location.pathname.includes('/edit');
-  console.log(id, isEditRoute);
 
   const createdDays = new Date(cardCreatedAt);
   const fontClass = {
diff --git a/src/components/post/Card.jsx b/src/components/post/Card.jsx
index 37dbde5..63d2b17 100644
--- a/src/components/post/Card.jsx
+++ b/src/components/post/Card.jsx
@@ -27,6 +27,10 @@ export const CardContentWrapper = styled.div`
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
 
   cursor: pointer;
+  transition: all 0.5s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
 
   @media (max-width: 1023px) {
     width: 50%;
diff --git a/src/components/post/SubHeader.jsx b/src/components/post/SubHeader.jsx
index adfc7f7..19d91bf 100644
--- a/src/components/post/SubHeader.jsx
+++ b/src/components/post/SubHeader.jsx
@@ -8,6 +8,7 @@ import ShareToggle from '../modal/ShareToggle';
 import KakaoModal from '../modal/KakaoModal';
 import ModalPortal from '../modal/ModalPortal';
 import Toast from '../common/Toast';
+import { Outlined36 } from '../../styles/ButtonStyle';
 import { getAllMessages } from '../../api/GetApi';
 
 const Text = css`
@@ -21,15 +22,6 @@ const FlexCenter = css`
   align-items: center;
 `;
 
-const Button = css`
-  ${FlexCenter}
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: 1px solid var(--gray300);
-  background: var(--white);
-  gap: 10px;
-`;
-
 const SubHeaderWrapper = styled.div`
   width: 100%;
   background-color: var(--white);
@@ -147,9 +139,7 @@ const SplitBarVertical2 = styled(SplitBarVertical)`
   margin: 0 13px;
 `;
 
-const ShareButton = styled.button`
-  ${Button}
-
+const ShareButton = styled(Outlined36)`
   @media (max-width: 470px) {
     padding: 6px 8px;
   }
diff --git a/src/components/post/postmake/ColorSelection.js b/src/components/post/postmake/ColorSelection.js
index fb5cc7c..293a4f8 100644
--- a/src/components/post/postmake/ColorSelection.js
+++ b/src/components/post/postmake/ColorSelection.js
@@ -23,7 +23,10 @@ const ColorOption = styled.div`
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   cursor: pointer;
-
+  transition: all 0.4s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
   @media (max-width: 768px) {
     width: 154px;
     height: 154px;
diff --git a/src/components/post/postmake/ImageSelection.js b/src/components/post/postmake/ImageSelection.js
index f778dd0..992eac6 100644
--- a/src/components/post/postmake/ImageSelection.js
+++ b/src/components/post/postmake/ImageSelection.js
@@ -22,7 +22,10 @@ const ImageOption = styled.div`
   height: 168px;
   margin: 5px;
   cursor: pointer;
-
+  transition: all 0.4s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
   @media (max-width: 768px) {
     width: 154px;
     height: 154px;
diff --git a/src/components/post/postmake/ToggleButton.js b/src/components/post/postmake/ToggleButton.js
index d0b729e..65bcbad 100644
--- a/src/components/post/postmake/ToggleButton.js
+++ b/src/components/post/postmake/ToggleButton.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Secondary } from '../../../styles/ButtonStyle';
 
 function ToggleButton({ state, handler, text1, text2 }) {
   return state ? (
@@ -20,7 +21,7 @@ const SelectToggle = styled.div`
   margin-top: 24px;
 `;
 
-const BtnCommon = styled.button`
+const BtnCommon = styled(Secondary)`
   display: flex;
   width: 122px;
   height: 40px;
diff --git a/src/components/post/subheader/EmojiDropDown.jsx b/src/components/post/subheader/EmojiDropDown.jsx
index ec8204f..6392e18 100644
--- a/src/components/post/subheader/EmojiDropDown.jsx
+++ b/src/components/post/subheader/EmojiDropDown.jsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { submitEmojiPost } from '../../../api/PostApi';
 import { getEmojiData } from '../../../api/GetApi';
+import { Outlined36 } from '../../../styles/ButtonStyle';
 
 const FlexCenter = css`
   display: flex;
@@ -11,15 +12,6 @@ const FlexCenter = css`
   align-items: center;
 `;
 
-const Button = css`
-  ${FlexCenter}
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: 1px solid var(--gray300);
-  background: var(--white);
-  gap: 10px;
-`;
-
 const EmojiGroup = styled.div`
   display: flex;
   gap: 8px;
@@ -93,17 +85,8 @@ const EmojiGroupInDropDown = styled(EmojiGroup)`
   grid-template-columns: 63px 63px 63px 63px;
 `;
 
-const EmojiAddButton = styled.div`
-  ${Button}
+const EmojiAddButton = styled(Outlined36)`
   position: relative;
-  cursor: pointer;
-
-  color: var(--gray-900, #181818);
-  font-family: Pretendard;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
 
   @media (max-width: 470px) {
     span {
diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx
index 621daac..bcac90a 100644
--- a/src/pages/PostId.jsx
+++ b/src/pages/PostId.jsx
@@ -70,6 +70,10 @@ export const CardWrapper = styled.div`
 const CardAdd = styled(CardContentWrapper)`
   justify-content: center;
   position: relative;
+  transition: all 0.5s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
 `;
 // eslint-disable-next-line
 const PlusIcon = styled.div`
diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
new file mode 100644
index 0000000..8f264ff
--- /dev/null
+++ b/src/styles/ButtonStyle.jsx
@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+
+export const ButtonCommon = styled.button`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+
+  cursor: ${({ disabled }) => disabled && 'not-allowed'};
+`;
+
+const PrimaryBtn = styled(ButtonCommon)`
+  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
+  color: var(--white);
+
+  // active 여부
+  &:hover:enabled {
+    background: var(--purple700);
+  }
+
+  &:active:enabled {
+    background: var(--purple800);
+  }
+
+  &:focus:enabled {
+    /* border: 2px solid var(--purple900); */
+    background: var(--purple800);
+  }
+`;
+
+export const Primary56 = styled(PrimaryBtn)`
+  padding: 1.4rem 2.4rem;
+  border-radius: 1.2rem;
+
+  /* Font/18 Bold */
+  font-family: Pretendard;
+  font-size: 1.8rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.8rem; /* 155.556% */
+  letter-spacing: -0.18px;
+`;
+
+export const Primary40 = styled(PrimaryBtn)`
+  padding: 0.7rem 1.6rem;
+  border-radius: 0.6rem;
+  /* Font/16 Regular */
+  font-family: Pretendard;
+  font-size: 1.6rem;
+  font-style: normal;
+  line-height: 2.6rem; /* 162.5% */
+  letter-spacing: -0.16px;
+`;
+
+export const Secondary = styled(ButtonCommon)`
+  padding: 0.7rem 1.6rem;
+  border-radius: 0.6rem;
+  color: var(--${({ disabled }) => (disabled ? 'white' : 'purple700')});
+
+  &:hover:enabled {
+    background: var(--purple100);
+    color: var(--purple700);
+  }
+
+  &:active:enabled {
+    background: var(--purple100);
+  }
+`;
+
+export const Outlined36 = styled(ButtonCommon)`
+  padding: 0.6rem 1.6rem;
+  border-radius: 0.6rem;
+  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')});
+  color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')});
+  border: 1px solid var(--gray300);
+  /* Font/16 Regular */
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+
+  &:hover:enabled {
+    background: var(--gray100);
+  }
+
+  &:active:enabled {
+    background: var(--gray100);
+  }
+
+  &:focus:enabled {
+    border: 1px solid var(--gray500);
+  }
+`;
+
+export const Outlined40 = styled(ButtonCommon)`
+  padding: 0.8rem 1.6rem;
+  border-radius: 0.6rem;
+  background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')});
+  color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')});
+  border: 1px solid var(--gray300);
+  /* Font/16 Regular */
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+
+  &:hover:enabled {
+    background: var(--gray100);
+  }
+
+  &:active:enabled {
+    background: var(--gray100);
+  }
+
+  &:focus:enabled {
+    border: 1px solid var(--gray500);
+  }
+`;