Carousel arrows no longer appear above navbar (updated z-index).

src/components/Button/Button.js

@@ -30,8 +30,8 @@ export const Button = ({type = 'default', link, buttonText, onClick}) => {
 
     return (        
         <div className="button-component">
-            {type === 'external' && <button aria-label={`${buttonText}, opens in a new tab`}><a href={link} target="_blank" rel="noreferrer">{buttonText} →</a></button>}
-            {type === 'internal' && <button aria-label={`Navigate to ${buttonText}`}><Link to={link} onClick={smoothScroll}>{buttonText} →</Link></button>}
+            {type === 'external' && <a href={link} target="_blank" rel="noreferrer"><button aria-label={`${buttonText}, opens in a new tab`}>{buttonText} →</button></a>}
+            {type === 'internal' && <Link to={link} onClick={smoothScroll}><button aria-label={`Navigate to ${buttonText}`}>{buttonText} →</button></Link>}
             {type === 'default' && <button aria-label={buttonText} onClick={onClick}>{buttonText}</button>}
         </div>
     )

src/components/Button/Button.scss

@@ -1,20 +1,16 @@
 @import '../../variables.scss';
 
 .button-component {
-
     button {
         background-color: $TrickFireGreen;
         padding: 0.65rem 1rem;
         border: none;
-
-        a {
-            font-family: $font-heading;
-            color: $Black;
-            text-decoration: none;
-            text-transform: uppercase;
-            font-weight: 600;
-            font-size: 1.5rem;
-        }
+        font-family: $font-heading;
+        color: $Black;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 1.5rem;
     }
 
     button:hover {

src/components/Navbar/Navbar.scss

@@ -7,7 +7,7 @@
     border-bottom: solid 1px white;
 
     position: fixed;
-    z-index: 1;
+    z-index: 2;
 
     .subpage-link {
         color: $White;