Enhanced the mic button color scheme (#1951)

Rakesh9100 · Dec 29, 2024 · 88bd148 · 88bd148
1 parent 29f8198
commit 88bd148
Showing 1 changed file with 30 additions and 4 deletions.
diff --git 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 {