Button Get Started

Solana-Hyperdrive · Nov 26, 2023 · 2e05b42 · 2e05b42
1 parent a45a78e
commit 2e05b42
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 9 deletions.
diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
@@ -36,18 +36,16 @@ export default function LandingHero() {
               </p>
               <div className="flex gap-8">
                 <Link href="https://ledger.flitchcoin.com/login" target="_blank">
-                <Button size={"sm"} variant={"primary"} className="font-medium">
+                <button className="Btn" data-text="Get Started">
                   Get Started
-                </Button>
+                </button>
                 </Link>
                 <Link href="https://tally.so/r/nrOxzR" target="_blank">
-                <Button
-                  variant={"outline"}
-                  size={"sm"}
-                  className="border-0 text-white cursor-pointer ml-2"
+                <button
+                  className="Btn" data-text="Join the Waitlist"
                 >
                   Join the waitlist
-                </Button>
+                </button>
                 </Link>
               </div>
             </div>

diff --git a/src/components/WhatsFlitchPay.tsx b/src/components/WhatsFlitchPay.tsx
@@ -56,7 +56,7 @@ function HeadComponent() {
           <div className="-mb-1">
             <FeaturesStar />
           </div>
-          <span className="bg-gradient-to-r from-[#5157E6] to-[#FFB800] bg-clip-text text-transparent">
+          <span className="hover:text-white bg-gradient-to-r from-[#5157E6] to-[#FFB800] bg-clip-text text-transparent">
             many features, wow{" "}
           </span>
         </div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -347,4 +347,53 @@
   opacity: 0.1;
   -webkit-mask-image: radial-gradient(140px 50% at 50% 100%, black, transparent);
   mask-image: radial-gradient(140px 50% at 50% 100%, black, transparent);
-}
+}
+
+
+.Btn {
+  width: 160px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
+  background-size: 250%;
+  background-position: left;
+  color: #ffd277;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition-duration: 1s;
+  overflow: hidden;
+}
+
+.Btn::before {
+  position: absolute;
+  content:  attr(data-text);
+  color: #ffd277;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 97%;
+  height: 90%;
+  border-radius: 8px;
+  transition-duration: 1s;
+  background-color: rgba(0, 0, 0, 0.842);
+  background-size: 200%;
+}
+
+.Btn:hover {
+  background-position: right;
+  transition-duration: 1s;
+}
+
+.Btn:hover::before {
+  background-position: right;
+  transition-duration: 1s;
+}
+
+.Btn:active {
+  transform: scale(0.95);
+}
+