From 177ec52f38649746d7d2dde538c3bf2227845a24 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Fri, 30 Apr 2021 09:29:01 +0300
Subject: [PATCH] added animation to header button

---
 src/commons/header/header.css    | 18 +++++++++++++
 src/commons/header/header.js     |  2 +-
 src/components/button/button.css | 43 ++++++++++++++++++++++++++++++++
 src/components/button/button.jsx |  9 ++++++-
 4 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/commons/header/header.css b/src/commons/header/header.css
index 193b412..acb9fee 100644
--- a/src/commons/header/header.css
+++ b/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);
+  }
+}
diff --git a/src/commons/header/header.js b/src/commons/header/header.js
index b8e96fd..b9f1f64 100644
--- a/src/commons/header/header.js
+++ b/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>
   );
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 06ea388..7165d70 100644
--- a/src/components/button/button.css
+++ b/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);
+  }
+}
diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx
index bbb1d7e..0b475c8 100644
--- a/src/components/button/button.jsx
+++ b/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>
   );