From 2c0696e22e9fc35109d71c4195556c5c241120a3 Mon Sep 17 00:00:00 2001
From: sourav0299 <105085605+sourav0299@users.noreply.github.com>
Date: Wed, 22 May 2024 18:06:00 +0530
Subject: [PATCH] styles: Button UI

---
 frontend/src/components/Navbar.tsx    | 10 ++++++----
 frontend/src/components/Quotes.tsx    |  5 +++--
 frontend/src/components/ui/Button.tsx |  2 +-
 frontend/src/pages/Game.tsx           |  5 +++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 857c6c3..cb2b06a 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -53,16 +53,18 @@ export const Navbar = () => {
         </div>
         <div className="hidden w-full md:block md:w-auto" id="navbar-default">
           <Button
-            className="bg-transparent mx-4 hover:bg-black"
+            className="bg-transparent mx-4 active:border-green-600 from-green-600 to-green-500 border-green-700"
             onClick={() => navigate("/simulation")}
           >
-            Simulation
+          <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-[#262522] rounded-full group-hover:w-24 group-hover:h-24 opacity-10"></span>
+            <span className="relative">Simulation</span>
           </Button>
           <Button
-            className="bg-transparent mx-4 hover:bg-black"
+            className="bg-transparent mx-4 active:border-green-600 from-green-600 to-green-500 border-green-700"
             onClick={() => navigate("/game")}
           >
-            Game
+            <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-[#262522] rounded-full group-hover:w-24 group-hover:h-24 opacity-10"></span>
+            <span className="relative">Game</span>
           </Button>
         </div>
       </div>
diff --git a/frontend/src/components/Quotes.tsx b/frontend/src/components/Quotes.tsx
index ec4a4d0..f055467 100644
--- a/frontend/src/components/Quotes.tsx
+++ b/frontend/src/components/Quotes.tsx
@@ -14,8 +14,9 @@ export const Quotes = () => {
         multipliers ensuring this Stake Original game is suited for everyone at
         our online casino !
       </h3>
-      <Button className="hover:bg-green-600" onClick={() => navigate("/game")}>
-        Play Plinko
+      <Button className="active:border-green-600 from-green-600 to-green-500 border-green-700" onClick={() => navigate("/game")}>
+        <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-[#302e2b] rounded-full group-hover:w-[600px] group-hover:h-36 opacity-10"></span>
+        <span className="relative">Play Plinko</span>
       </Button>
     </div>
   );
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 0f34699..f173387 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -10,7 +10,7 @@ export const Button = ({
   return (
     <button
       onClick={onClick}
-      className={`px-2 py-2 text-2xl bg-green-500  text-white font-bold rounded ${className}`}
+      className={`rounded relative inline-flex group items-center justify-center px-3.5 py-2 m-1 cursor-pointer border-b-4 border-l-2  active:shadow-none shadow-lg bg-gradient-to-tr  text-white${className}`}
     >
       {children}
     </button>
diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
index 42f6914..e647fb1 100644
--- a/frontend/src/pages/Game.tsx
+++ b/frontend/src/pages/Game.tsx
@@ -21,7 +21,7 @@ export function Game() {
     <div className="flex flex-col lg:flex-row items-center justify-center">
       <canvas ref={canvasRef} width="800" height="800"></canvas>
       <Button
-        className="px-10 mb-4"
+        className="px-10 mb-4 active:border-green-600 from-green-600 to-green-500 border-green-700"
         onClick={async () => {
           const response = await axios.post(`${baseURL}/game`, {
             data: 1,
@@ -31,7 +31,8 @@ export function Game() {
           }
         }}
       >
-        Add ball
+        <span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-[#302e2b] rounded-full group-hover:w-24 group-hover:h-24 opacity-10"></span>
+        <span className="relative">Add Ball</span>
       </Button>
     </div>
   );