added animation to header button

src/commons/header/header.css

@@ -56,6 +56,12 @@
   animation: moveInRight 1s ease-out;
 }
 
+#header-button {
+  animation: moveInBottom 1s ease-out;
+  animation-delay: 2s;
+  opacity: 0;
+}
+
 @keyframes moveInLeft {
   0% {
     opacity: 0;
@@ -87,3 +93,15 @@
     transform: translate(0);
   }
 }
+
+@keyframes moveInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}

src/commons/header/header.js

@@ -13,7 +13,7 @@ function Header() {
           <span className="heading-primary-main">Outdoors</span>
           <span className="heading-primary-sub">is where life happens</span>
         </h1>
-        <Button text={"Discover our tours"} />
+        <Button animationName={"move-in-bottom"} text={"Discover our tours"} />
       </div>
     </header>
   );

src/components/button/button.css

@@ -6,6 +6,11 @@
   display: inline-block;
   border-radius: 100px;
   transition: all 0.2s;
+  position: relative;
+}
+
+.move-in-bottom {
+  animation: moveInBottom 1s ease-out;
 }
 
 .btn:hover {
@@ -22,3 +27,41 @@
   background-color: #fff;
   color: #777;
 }
+
+.btn::after {
+  content: " ";
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: all 0.4s;
+}
+
+.btn-white::after {
+  background-color: white;
+}
+
+.btn:hover::after {
+  transform: scaleX(1.4) scaleY(1.6);
+  opacity: 0;
+}
+
+@keyframes moveInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(250px);
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}

src/components/button/button.jsx

@@ -2,7 +2,14 @@ import "./button.css";
 
 function Button(props) {
   return (
-    <a href="#" className="btn btn-white">
+    <a
+      href="#"
+      className={
+        props.animationName === "move-in-bottom"
+          ? "btn btn-white move-in-bottom"
+          : "btn btn-white"
+      }
+    >
       {props.text}
     </a>
   );