diff --git a/src/App.css b/src/App.css
index e244401..559bf97 100644
--- a/src/App.css
+++ b/src/App.css
@@ -53,4 +53,20 @@ input[type=number]::-webkit-outer-spin-button {
 
 .info-button-container:hover .info-box {
   display: block;
-}
\ No newline at end of file
+}
+/* Button styles */
+.button-custom 
+{
+  padding: 0.5rem 1rem;
+  color: white;
+  background-color: #4299e1; 
+  border-radius: 0.375rem;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button-custom:hover {
+  background-color: #2b6cb0;
+  transform: scale(1.05);
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+}
diff --git a/src/App.jsx b/src/App.jsx
index 9f3bdc2..bdf609d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -77,12 +77,12 @@ function App() {
         </div>
 
         <div className="col-auto">
-          <button
-            onClick={handleKey}
-            className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
-          >
-            Enter
-          </button>
+           <button
+           onClick={handleKey}
+           className="button-custom"
+           >
+               Enter
+           </button>
         </div>
       </div>