diff --git a/JSX  CSS  Simple Button/button.css b/JSX  CSS  Simple Button/button.css
new file mode 100644
index 0000000..c78f90b
--- /dev/null
+++ b/JSX  CSS  Simple Button/button.css	
@@ -0,0 +1,26 @@
+.button {
+    width: 100px;
+    height: 40px;
+    
+    border: none;
+    border-radius: 8px;
+    background-color: #000;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    font-family: monospace;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    transition: background-color 0.5s ease, color 0.5s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.button:hover {
+    background-color: #fff;
+    color: #000;
+}
+
diff --git a/JSX  CSS  Simple Button/button.jsx b/JSX  CSS  Simple Button/button.jsx
new file mode 100644
index 0000000..4aca30d
--- /dev/null
+++ b/JSX  CSS  Simple Button/button.jsx	
@@ -0,0 +1,15 @@
+import React from "react";
+import "./button.css";
+
+return function Button(props) {
+        <button 
+            id={props.buttonName} 
+            type="submit" 
+            className="button"
+            onClick={Home}
+            >
+                <div className="sign-up-name">Sign Up</div>
+        </button>
+}
+
+export default Button;
\ No newline at end of file