Add button hover effects

Author: good3n

src/assets/styles/global.js

@@ -109,7 +109,6 @@ const GlobalStyle = createGlobalStyle`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    /* font-size: var(--font-size__); */
     padding: 1rem 3rem;
     position: relative;
     overflow: hidden;
@@ -126,6 +125,25 @@ const GlobalStyle = createGlobalStyle`
       top: 0;
       left: 0;
       bottom: 0;
+      transition: all .3s ease-in-out;
+    }
+
+    &:hover {
+      &::before {
+        width: 200%;
+        left: -5%;
+      }
+    }
+
+    span {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    img,
+    svg {
+      position: relative;
     }
   }
 

src/components/Nav/Nav.styles.js

@@ -244,7 +244,6 @@ export const NavToggle = styled.button`
     text-transform: none;
     border: 0;
     margin: 0;
-    overflow: visible;
     outline: none;
     position: relative;
     top: 3px;

src/pages/index.js

@@ -34,8 +34,10 @@ const IndexPage = () => (
         target="_blank"
         title="Join CodeHelp Discord!"
       >
-        <img alt="Discord Icon" src={discordIcon} />
-        Join CodeHelp
+        <span>
+          <img alt="Discord Icon" src={discordIcon} />
+          Join CodeHelp
+        </span>
       </a>
     </StyledHome>
   </Layout>