From 5302a272ae221ed0e50ad1e523a76919faee435b Mon Sep 17 00:00:00 2001
From: nishupr <nishupundir073.com>
Date: Sat, 30 May 2026 02:40:51 +0530
Subject: [PATCH] feat: improve Back to Top button UI with gradient colors and
 pulse ring effect

---
 src/components/BackToTop.jsx | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/BackToTop.jsx b/src/components/BackToTop.jsx
index 2dcd39b9..8ea8b29f 100644
--- a/src/components/BackToTop.jsx
+++ b/src/components/BackToTop.jsx
@@ -5,6 +5,7 @@ import { motion, AnimatePresence } from "framer-motion";
 
 const BackToTop = () => {
   const [isVisible, setIsVisible] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
 
   useEffect(() => {
     const toggleVisibility = () => {
@@ -16,10 +17,7 @@ const BackToTop = () => {
     };
 
     window.addEventListener("scroll", toggleVisibility);
-
-    return () => {
-      window.removeEventListener("scroll", toggleVisibility);
-    };
+    return () => window.removeEventListener("scroll", toggleVisibility);
   }, []);
 
   const scrollToTop = () => {
@@ -32,17 +30,25 @@ const BackToTop = () => {
   return (
     <AnimatePresence>
       {isVisible && (
-        <motion.button
-          onClick={scrollToTop}
-          initial={{ opacity: 0, y: 50 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 50 }}
-          transition={{ duration: 0.3 }}
-          className="fixed bottom-28 right-11 z-50 bg-black text-white px-4 py-3 rounded-full shadow-lg hover:scale-105 transition"
-          aria-label="Back to Top"
-        >
-          ↑
-        </motion.button>
+        <div className="fixed bottom-28 right-11 z-50">
+
+          <motion.button
+            onClick={scrollToTop}
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={() => setShowTooltip(false)}
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 50 }}
+            transition={{ duration: 0.3 }}
+            whileHover={{ scale: 1.15 }}
+            whileTap={{ scale: 0.95 }}
+            className="relative group bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-3 rounded-full shadow-lg shadow-blue-500/25 hover:shadow-blue-500/50 transition-all duration-300"
+            aria-label="Back to Top"
+          >
+          <span className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-30 group-hover:animate-ping transition-opacity" />
+            ↑
+          </motion.button>
+        </div>
       )}
     </AnimatePresence>
   );