Merge pull request #5 from Adi-204/tryout

Suggested design for buttons
metakgp · Dec 8, 2024 · 3c14d40 · 3c14d40
2 parents 319443e + 24a6a76
commit 3c14d40
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/app/page.jsx b/app/page.jsx
@@ -7,10 +7,12 @@ const Home = () => {
 			<h3>Find your travel partners for your next trip or train ride</h3>
 			<br />
 			<div className="d-flex justify-content-center gap-3">
-				<Link href="/trips" className="btn btn-primary btn-lg">
+				<Link href="/trips" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+				>
 					Trips
 				</Link>
-				<Link href="/trains" className="btn btn-secondary btn-lg">
+				<Link href="/trains" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+				>
 					Trains
 				</Link>
 			</div>

diff --git a/app/trains/page.jsx b/app/trains/page.jsx
@@ -20,17 +20,19 @@ const Page = () => {
 			</h6>
 			<br />
 			<div className="d-flex justify-content-center gap-3 align-items-center flex-wrap mb-3">
-				<Link href="/trains/create" className="btn btn-primary btn-lg">
+				<Link href="/trains/create" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+				>
 					Enter New Train Details
 				</Link>
 				<Link
 					href="/trains/my-trains"
-					className="btn btn-primary btn-lg"
+					className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
 				>
 					My Current Train Trips
 				</Link>
 			</div>
-			<Link href="/" className="btn btn-secondary btn-lg">
+			<Link href="/" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+			>
 				Back to Home
 			</Link>
 			<footer className="mt-5">

diff --git a/app/trips/page.jsx b/app/trips/page.jsx
@@ -16,14 +16,17 @@ const Page = () => {
 			</h6>
 			<br />
 			<div className="d-flex justify-content-center gap-3 align-items-center flex-wrap mb-3">
-				<Link href="/trips/create" className="btn btn-primary btn-lg">
+				<Link href="/trips/create" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+				>
 					Enter New Trip Details
 				</Link>
-				<Link href="/trips/my-trips" className="btn btn-primary btn-lg">
+				<Link href="/trips/my-trips" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+				>
 					My Current Trips
 				</Link>
 			</div>
-			<Link href="/" className="btn btn-secondary btn-lg">
+			<Link href="/" className="btn btn-lg text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full text-sm px-4 py-2 text-center transition-all duration-500"
+			>
 				Back to Home
 			</Link>
 			<footer className="mt-5">