Added an animated scroll down button on header section

Author: Muhammed-Rahif

src/components/LinkButton/LinkButton.css

@@ -7,15 +7,15 @@
 
   border-width: 0;
   border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-  
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+
   background-color: #2ecc71;
   color: #fff;
-  
-  -webkit-transition: background-color .3s;
-  -moz-transition: background-color .3s;
-  transition: background-color .3s;
-  margin-bottom: 10vw;
+
+  -webkit-transition: background-color 0.3s;
+  -moz-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  margin-bottom: 0 !important;
 }
 
 .LinkButton:hover {
@@ -24,5 +24,32 @@
 
 .LinkButton > span {
   font-size: 1.1em;
-  letter-spacing: .05em;
+  letter-spacing: 0.05em;
+}
+.LinkButton-Wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+.Scroll-Down {
+  cursor: pointer;
+  position: relative;
+  animation: swing alternate 0.5s infinite;
+}
+.Scroll-Down:active {
+  opacity: 0.75;
+}
+.Scroll-Down-Wrapper {
+  padding: 1vw;
+  padding-bottom: 1.75vw;
+}
+@keyframes swing {
+  from {
+    top: -0.5rem;
+  }
+  to {
+    top: 1rem;
+  }
 }

src/components/LinkButton/LinkButton.jsx

@@ -1,12 +1,21 @@
-import React, { Component } from 'react';
-import './LinkButton.css';
+import React, { Component } from "react";
+import "./LinkButton.css";
+import scrollDown from "./scroll-down.svg";
 
 class LinkButton extends Component {
   render() {
     return (
-      <a className="LinkButton" href="https://github.com/firstcontributions/first-contributions/blob/master/README.md">
-        <span> Get started </span>
-      </a>
+      <div className="LinkButton-Wrapper">
+        <a
+          className="LinkButton"
+          href="https://github.com/firstcontributions/first-contributions/blob/master/README.md"
+        >
+          <span> Get started </span>
+        </a>
+        <div className="Scroll-Down-Wrapper">
+          <img className="Scroll-Down" onClick={() => { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" />
+        </div>
+      </div>
     );
   }
 }