Merge pull request #128 from zalabhavy/enter

Enter Button Style Added
Avdhesh-Varshney · Jun 16, 2024 · 6c69bf0 · 6c69bf0
2 parents 2023604 + 9cffc41
commit 6c69bf0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git 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;
-}
+}
+/* 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
@@ -100,12 +100,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>