diff --git a/src/components/ui/button/button.jsx b/src/components/ui/button/button.jsx
new file mode 100644
index 0000000..5ff769c
--- /dev/null
+++ b/src/components/ui/button/button.jsx
@@ -0,0 +1,16 @@
+import styles from "./button.module.css";
+
+const Button = ({ children, variant = "primary", onClick }) => {
+    let btnStyle;
+
+    if (variant === "primary") btnStyle = styles.primary;
+    else if (variant === "danger") btnStyle = styles.danger;
+    else if(variant === "transparent") btnStyle = styles.transparent;
+    else btnStyle = styles.default;
+
+    return <div className={`${styles.btn} ${btnStyle}`} onClick={onClick}>
+        {children}
+    </div>;
+};
+
+export default Button;
diff --git a/src/components/ui/button/button.module.css b/src/components/ui/button/button.module.css
new file mode 100644
index 0000000..bcb2324
--- /dev/null
+++ b/src/components/ui/button/button.module.css
@@ -0,0 +1,39 @@
+.btn {
+    padding: 0.2rem 0.8rem 0.2rem 0.8rem;
+    width: fit-content;
+    border-radius: 20px;
+}
+
+.btn:hover {
+    cursor: pointer;
+    filter: brightness(0.95);
+}
+
+.primary {
+    color: white;
+    background-color: #019AFF;
+}
+
+.danger {
+    color: white;
+    background-color: #FF073A;
+}
+
+.transparent {
+    color: #019AFF;
+}
+
+.default {
+    color: black;
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow:
+            0 8px 32px rgba(0, 0, 0, 0.1),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5),
+            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+            inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
+}
\ No newline at end of file