From b4b702decbdf86215ead47aaf0fdcfb81dfa424d Mon Sep 17 00:00:00 2001
From: vvu060 <vvu060@gmail.com>
Date: Tue, 26 Dec 2023 11:22:44 +0530
Subject: [PATCH] Add hover effect to GithubStarsButton

---
 src/components/shared/GithubStarsButton.tsx | 10 +++++++++-
 src/css/custom.css                          |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/shared/GithubStarsButton.tsx b/src/components/shared/GithubStarsButton.tsx
index 9dc9c8e1d8..9b24549d7e 100644
--- a/src/components/shared/GithubStarsButton.tsx
+++ b/src/components/shared/GithubStarsButton.tsx
@@ -17,8 +17,16 @@ function GithubIcon() {
 
 export default function GithubStarsButton({className}) {
   const starsCount = useContext(GithubStarsContext)
+  const [isHovered, setIsHovered] = React.useState(false)
+
   return (
-    <a href={githubRepoURL} target="_blank" className={`${className} header-button header-button-github`}>
+    <a
+      href={githubRepoURL}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      target="_blank"
+      className={`${className} header-button header-button-github ${isHovered && "button-grid-bg-github"}`}
+    >
       <GithubIcon />
       <span>
         Star <span className="min-w-[3ch] inline-block">{starsCount}</span>
diff --git a/src/css/custom.css b/src/css/custom.css
index 02d1bf4ddb..b715c94d0c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -377,6 +377,12 @@ nav.menu {
   border-radius: 20px;
 }
 
+.button-grid-bg-github {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 2px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 2px);
+  background-size: 20px 20px;
+}
+
 @media (max-width: 996px) {
   .grid-bg-section {
     background-size: 40px 40px;