swipe design button

src/App.css

@@ -26,7 +26,7 @@ body::-webkit-scrollbar-track {
 }
 
 body::-webkit-scrollbar-thumb {
-  background: #f5892a; 
+  background: #e27101; 
 }
 
 body::-webkit-scrollbar-thumb:hover {

src/Components/About.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ButtonSwipe from "./ButtonSwipe";
 
 const About = () => {
   return (
@@ -49,6 +50,7 @@ const About = () => {
         the input points are contained in it) as well as the plausibility of the
         obtained filamentary structures.
       </p>
+      <ButtonSwipe>Know More!</ButtonSwipe>
     </div>
   );
 };

src/Components/ButtonSwipe.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const ButtonSwipe = (props) => {
+  return (
+    <div className="button-swipe-wrapper">
+      <div className="btn btn-1 hover-filled-slide-down">
+        <span>{props.children}</span>
+      </div>
+    </div>
+  );
+};
+
+export default ButtonSwipe;

src/Constants/particles.js

@@ -1,4 +1,4 @@
-var w = window.innerWidth
+var w = window.innerWidth;
 
 export const particles = {
   autoPlay: true,
@@ -254,7 +254,7 @@ export const particles = {
     links: {
       blink: false,
       color: {
-        value: "#e64b17",
+        value: "#ff6a00",
       },
       consent: false,
       distance: 150,

src/sass/button.scss

@@ -0,0 +1,72 @@
+@import "./variables.scss";
+
+.button-swipe-wrapper {
+  width: fit-content;
+  margin: 1rem auto;
+  margin-top: 2rem;
+  :active,
+  :hover,
+  :focus {
+    outline: 0 !important;
+    outline-offset: 0;
+  }
+  ::before,
+  ::after {
+    position: absolute;
+    content: "";
+  }
+}
+
+.btn {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+  background-color: transparent;
+  border-radius: 10px;
+
+  cursor: pointer;
+  min-width: 150px;
+  background-color: $theme-amber;
+}
+.btn span {
+  position: relative;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.8rem 3rem;
+  transition: 0.3s;
+}
+
+/*--- btn-1 ---*/
+.btn-1::before {
+  background-color: rgb(0, 0, 0);
+  transition: 0.3s ease-out;
+}
+.btn-1 span {
+  color: $theme-amber;
+  border: 1.5px solid $theme-amber;
+  border-radius: 10px;
+  transition: 0.2s 0.1s;
+}
+.btn-1 span:hover {
+  color: rgb(0, 0, 0);
+  font-weight: bold;
+  transition: 0.2s 0.1s;
+}
+
+/* 1.hover-filled-slide-down */
+.btn.hover-filled-slide-down::before {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+}
+.btn.hover-filled-slide-down:hover::before {
+  height: 0%;
+}

src/sass/index.scss

@@ -1,26 +1,27 @@
-@import './hero.scss';
-@import './about.scss';
-@import './navbar.scss';
+@import "./hero.scss";
+@import "./about.scss";
+@import "./navbar.scss";
+@import "./button.scss";
 
 h1 {
-    position: relative;
-    font-family: 'Bitter', serif;
-    font-weight: lighter;
-    font-size: 40px;
-    letter-spacing: 1.4px;
-    color: $heading-color;
-    margin-bottom: 15px;
-    @media #{$media-mobile} {
-      font-size: 30px;
-      text-align: center;
-    }
+  position: relative;
+  font-family: "Bitter", serif;
+  font-weight: lighter;
+  font-size: 40px;
+  letter-spacing: 1.4px;
+  color: $heading-color;
+  margin-bottom: 15px;
+  @media #{$media-mobile} {
+    font-size: 30px;
+    text-align: center;
   }
-
-  p {
-    line-height: 1.5rem;
-    color: $text-color;
-    font-size: 14px;
-    @media #{$media-mobile} {
-      font-size: 12px;
-    }
-  }
+}
+
+p {
+  line-height: 1.5rem;
+  color: $text-color;
+  font-size: 14px;
+  @media #{$media-mobile} {
+    font-size: 12px;
+  }
+}