diff --git a/above.html b/above.html
new file mode 100644
index 00000000..83d26514
--- /dev/null
+++ b/above.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fancy Button</title>
+  <style>
+    .fancy-button {
+      padding: 10px 20px;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: background-color 0.3s;
+    }
+
+    .fancy-button:hover {
+      background-color: #45a049;
+    }
+  </style>
+</head>
+<body>
+  <button class="fancy-button">Click Me!</button>
+</body>
+</html>
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index 9835860e..65d8507a 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -48,18 +48,25 @@ function HeroSection() {
                 {slides.map((slide, index) => (
                     <div key={index}>
                         <img
-                            src={slide.image}
-                            alt={slide.alt}
-                            className="w-full h-auto block"
-                            tabIndex={-1}
-                        />
+                        src={slide.image}
+                        alt={slide.alt}
+                        className="w-full h-auto block transform transition-transform duration-500 hover:scale-105"
+                        tabIndex={-1}
+/>
+
 
                         <LinkButton
                             href={slide.href}
-                            className="absolute bottom-10 right-8 md:bottom-21 md:right-21"
+                            className="
+                                     absolute bottom-10 right-8 md:bottom-21 md:right-21
+                                     bg-indigo-600 text-white px-5 py-2 rounded-lg font-medium
+                                    shadow-md hover:shadow-xl hover:scale-105 transition-transform duration-300
+                                    focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400
+                                    "
                         >
                             {slide.buttonLabel}
                         </LinkButton>
+
                     </div>
                 ))}
             </Slider>
diff --git a/tailwind.config.js b/tailwind.config.js
index f11d1e5f..dbb869d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,18 @@ export default {
     "./src/**/*.{js,jsx,ts,tsx}"
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        fadeIn: 'fadeIn 0.8s ease-out forwards',
+      },
+    },
   },
   plugins: [],
 };
+
