diff --git a/frontend/src/components/common/SquareButton/index.tsx b/frontend/src/components/common/SquareButton/index.tsx
new file mode 100644
index 000000000..915a62bf0
--- /dev/null
+++ b/frontend/src/components/common/SquareButton/index.tsx
@@ -0,0 +1,14 @@
+import * as S from './style';
+
+interface SquareButtonProps {
+  theme: 'blank' | 'fill';
+  children: string;
+}
+
+/* 마감시간, 확인, 취소 등 사용될 버튼
+ * 부모에서 크기를 조절, 내용(children) 전달
+ * props로 테마를 받음
+ */
+export default function SquareButton({ theme, children }: SquareButtonProps) {
+  return <S.Button theme={theme}>{children}</S.Button>;
+}
diff --git a/frontend/src/components/common/SquareButton/style.ts b/frontend/src/components/common/SquareButton/style.ts
new file mode 100644
index 000000000..3af23625b
--- /dev/null
+++ b/frontend/src/components/common/SquareButton/style.ts
@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+interface ButtonProps {
+  theme: 'blank' | 'fill';
+}
+
+export const Button = styled.button<ButtonProps>`
+  display: block;
+
+  width: 100%;
+  height: 100%;
+  outline: 2px solid #ff7877;
+  border-radius: 5px;
+
+  background-color: ${props => (props.theme === 'blank' ? 'rgba(0,0,0,0)' : '#ff7877')};
+  color: ${props => (props.theme === 'blank' ? '#ff7877' : '#ffffff')};
+
+  font-size: 16px;
+`;