diff --git a/src/components/button.module.css b/src/components/button.module.css
new file mode 100644
index 0000000..85e67b6
--- /dev/null
+++ b/src/components/button.module.css
@@ -0,0 +1,54 @@
+.button {
+  background-color: var(--color-50);
+  border-radius: 9999px;
+  padding: 10px 20px;
+  outline: none;
+  border: 2px solid var(--color-100);
+  transition: background-color 0.3s ease;
+  height: 50px;
+}
+
+.button:hover {
+  background-color: var(--color-75);
+}
+
+.button:active {
+  background-color: var(--color-100);
+}
+
+.button span {
+  color: var(--foreground);
+  font-size: var(--button-text-size);
+  font-weight: 600;
+}
+
+.icon {
+  display: grid;
+  grid-template-columns: 25px 1fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.style_primary {
+  --color-50: var(--primary-50);
+  --color-75: var(--primary-75);
+  --color-100: var(--primary-100);
+}
+
+.style_warning {
+  --color-50: var(--warning-50);
+  --color-75: var(--warning-75);
+  --color-100: var(--warning-100);
+}
+
+.style_success {
+  --color-50: var(--success-50);
+  --color-75: var(--success-75);
+  --color-100: var(--success-100);
+}
+
+.style_danger {
+  --color-50: var(--danger-50);
+  --color-75: var(--danger-75);
+  --color-100: var(--danger-100);
+}
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..275063f
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,39 @@
+import style from './button.module.css';
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function Button({
+  type,
+  children,
+  mode = 'primary',
+  icon,
+}: {
+  type?: 'button' | 'submit' | 'reset';
+  children?: React.ReactNode;
+  mode?: 'primary' | 'warning' | 'success' | 'danger';
+  icon?: IconProp;
+}) {
+  if (!icon) {
+    return (
+      <button
+        className={style.button + ' ' + style['style_' + mode]}
+        type={type}
+      >
+        <span>{children}</span>
+      </button>
+    );
+  } else {
+    return (
+      <button
+        className={
+          style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
+        }
+        type={type}
+      >
+        <FontAwesomeIcon icon={icon} height={25} />
+        <span>{children}</span>
+      </button>
+    );
+  }
+}