Add new button hover style

Rupali59 · Apr 20, 2023 · cdc187c · cdc187c
1 parent 3bd6858
commit cdc187c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 21 deletions.
diff --git a/src/components/icons/hex.js b/src/components/icons/hex.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const IconHex = () => (
+  <svg id="hex" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
+    <title>Hexagon</title>
+    <g transform="translate(-8.000000, -2.000000)">
+      <g transform="translate(11.000000, 5.000000)">
+        <polygon
+          stroke="currentColor"
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          points="39 0 0 22 0 67 39 90 78 68 78 23"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default IconHex;
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -6,6 +6,7 @@ export { default as IconFolder } from './folder';
 export { default as IconFork } from './fork';
 export { default as Icon } from './icon';
 export { default as IconGitHub } from './github';
+export { default as IconHex } from './hex';
 export { default as IconInstagram } from './instagram';
 export { default as IconLinkedin } from './linkedin';
 export { default as IconLoader } from './loader';

diff --git a/src/components/icons/logo.js b/src/components/icons/logo.js
@@ -5,10 +5,6 @@ const IconLogo = () => (
     <title>Logo</title>
     <g transform="translate(-8.000000, -2.000000)">
       <g transform="translate(11.000000, 5.000000)">
-        <path
-          d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
-          fill="currentColor"
-        />
         <polygon
           id="Shape"
           stroke="currentColor"
@@ -17,6 +13,10 @@ const IconLogo = () => (
           strokeLinejoin="round"
           points="39 0 0 22 0 67 39 90 78 68 78 23"
         />
+        <path
+          d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
+          fill="currentColor"
+        />
       </g>
     </g>
   </svg>

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -7,7 +7,7 @@ import { navLinks } from '@config';
 import { loaderDelay } from '@utils';
 import { useScrollDirection, usePrefersReducedMotion } from '@hooks';
 import { Menu } from '@components';
-import { IconLogo } from '@components/icons';
+import { IconLogo, IconHex } from '@components/icons';
 
 const StyledHeader = styled.header`
   ${({ theme }) => theme.mixins.flexBetween};
@@ -69,18 +69,37 @@ const StyledNav = styled.nav`
       color: var(--green);
       width: 42px;
       height: 42px;
+      position: relative;
+      z-index: 1;
 
-      &:hover,
-      &:focus {
+      .hex-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transition: var(--transition);
+      }
+
+      .logo-container {
+        position: relative;
+        z-index: 1;
         svg {
-          fill: var(--green-tint);
+          fill: none;
+          transition: var(--transition);
+          user-select: none;
+          polygon {
+            fill: var(--navy);
+          }
         }
       }
 
-      svg {
-        fill: none;
-        transition: var(--transition);
-        user-select: none;
+      &:hover,
+      &:focus {
+        outline: 0;
+        transform: translate(-4px, -4px);
+        .hex-container {
+          transform: translate(4px, 3px);
+        }
       }
     }
   }
@@ -162,11 +181,21 @@ const Nav = ({ isHome }) => {
     <div className="logo" tabIndex="-1">
       {isHome ? (
         <a href="/" aria-label="home">
-          <IconLogo />
+          <div className="hex-container">
+            <IconHex />
+          </div>
+          <div className="logo-container">
+            <IconLogo />
+          </div>
         </a>
       ) : (
         <Link to="/" aria-label="home">
-          <IconLogo />
+          <div className="hex-container">
+            <IconHex />
+          </div>
+          <div className="logo-container">
+            <IconLogo />
+          </div>
         </Link>
       )}
     </div>

diff --git a/src/components/sections/about.js b/src/components/sections/about.js
@@ -66,10 +66,10 @@ const StyledPic = styled.div`
     &:hover,
     &:focus {
       outline: 0;
+      transform: translate(-4px, -4px);
 
       &:after {
-        top: 15px;
-        left: 15px;
+        transform: translate(8px, 8px);
       }
 
       .img {
@@ -106,8 +106,8 @@ const StyledPic = styled.div`
 
     &:after {
       border: 2px solid var(--green);
-      top: 20px;
-      left: 20px;
+      top: 14px;
+      left: 14px;
       z-index: -1;
     }
   }

diff --git a/src/styles/mixins.js b/src/styles/mixins.js
@@ -16,8 +16,9 @@ const button = css`
   &:hover,
   &:focus,
   &:active {
-    background-color: var(--green-tint);
     outline: none;
+    box-shadow: 4px 4px 0 0 var(--green);
+    transform: translate(-5px, -5px);
   }
   &:after {
     display: none !important;
@@ -102,8 +103,9 @@ const mixins = {
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--green-tint);
       outline: none;
+      box-shadow: 3px 3px 0 0 var(--green);
+      transform: translate(-4px, -4px);
     }
     &:after {
       display: none !important;
@@ -125,8 +127,9 @@ const mixins = {
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--green-tint);
       outline: none;
+      box-shadow: 4px 4px 0 0 var(--green);
+      transform: translate(-5px, -5px);
     }
     &:after {
       display: none !important;