Added different color for social media icons upon hover

piyushgarg-dev · Feb 9, 2025 · c37e55d · c37e55d
1 parent d436034
commit c37e55d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/components/UI/Contact.jsx b/components/UI/Contact.jsx
@@ -62,23 +62,23 @@ const Contact = () => {
 
             <div className={`${classes.social__links}`}>
               <Link
-                className="hover:text-[#01d293] duration-300"
+                className="hover:text-red-600 duration-300"
                 aria-label="Youtube Channel"
                 href="https://youtube.com/@piyushgargdev"
                 target="_blank"
               >
                 <RiYoutubeFill />
               </Link>
               <Link
-                className="hover:text-[#01d293] duration-300"
+                className="hover:text-white duration-300"
                 aria-label="Github Profile"
                 href="https://github.com/piyushgarg-dev"
                 target="_blank"
               >
                 <RiGithubFill />
               </Link>
               <Link
-                className="hover:text-[#01d293] duration-300"
+                className="hover:text-white duration-300"
                 aria-label="Twitter Account"
                 href="https://twitter.com/piyushgarg_dev"
                 target="_blank"
@@ -87,7 +87,7 @@ const Contact = () => {
                 <NewTwitterLogo />
               </Link>
               <Link
-                className="hover:text-[#01d293] duration-300"
+                className="hover:text-[#0077b5] duration-300"
                 aria-label="LinedIn Account"
                 href="https://www.linkedin.com/in/piyushgarg195/"
                 target="_blank"

diff --git a/styles/contact.module.css b/styles/contact.module.css
@@ -43,13 +43,29 @@
   align-items: center;
   justify-content: center;
   transition: color 0.3s ease, transform 0.3s ease;
+  color: #808dad; 
 }
 
 .social__links a:hover {
-  color: var(--site-theme-color);
   transform: scale(1.2);
 }
 
+.social__links a[aria-label="Youtube Channel"]:hover {
+  color: red;
+}
+
+.social__links a[aria-label="Github Profile"]:hover {
+  color: white;
+}
+
+.social__links a[aria-label="Twitter Account"]:hover {
+  color: white;
+}
+
+.social__links a[aria-label="LinkedIn Account"]:hover {
+  color: #0077b5;
+}
+
 .social__links a i {
   transition: transform 0.3s ease;
 }