Add hover effect to GithubStarsButton

tailcallhq · Dec 26, 2023 · b4b702d · b4b702d
1 parent d4cb432
commit b4b702d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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;