diff --git a/style.css b/style.css
index df010ec1d..34021d92c 100644
--- a/style.css
+++ b/style.css
@@ -2031,19 +2031,45 @@ footer {
 
 #searchBar button {
     font-size: 2rem;
-    background: transparent;
     border: 0;
     color: white;
     margin-left: 5px;
-    background-color: #ff1b82;
     padding: .7rem;
     width: 8rem;
+    cursor: pointer;
     border-radius: 5rem;
+    background-color: #4158D0;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    background-image: linear-gradient(90deg, #4158D0 7%, #C850C0 47%, #FFCC70 96%);
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.6);
 }
 
 #searchBar button:hover {
-    transform: scale(1.02);
-    background: #ff6984;
+    background-size: 200%;
+    background-position: right;
+    transform: translateY(-5px);
+    animation: gradientSlide 0.8s forwards;
+    background: linear-gradient(to right, #002a70, #89c6ff);
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.7);
+}
+
+.dark-mode #searchBar button:hover {
+    background-size: 200%;
+    background-position: right;
+    transform: translateY(-5px);
+    animation: gradientSlide 0.8s forwards;
+    background: linear-gradient(to right, #d4004a, #ff90b3);
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.7);
+}
+
+@keyframes gradientSlide {
+    from {
+        background-position: right;
+    }
+
+    to {
+        background-position: left;
+    }
 }
 
 #searchBar input {