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>
   );