Update breed_comparison.py

breed_comparison.py

@@ -42,7 +42,7 @@ def create_comparison_tab(dog_breeds, get_dog_description, breed_noise_info, bre
                 value="Border_Collie"
             )
 
-        compare_btn = gr.Button("Compare Breeds")
+        compare_btn = gr.Button("Compare Breeds",  variant="primary", elem_classes="custom-compare-button")
         comparison_output = gr.HTML(label="Comparison Results")
 
         def format_noise_data(notes):
@@ -372,6 +372,45 @@ def create_comparison_tab(dog_breeds, get_dog_description, breed_noise_info, bre
                     grid-template-columns: 1fr;
                 }
             }
+
+            .custom-compare-button {
+                background: linear-gradient(135deg, #4299e1, #48bb78) !important;
+                border: none !important;
+                padding: 12px 30px !important;
+                border-radius: 8px !important;
+                font-size: 1.1em !important;
+                font-weight: 600 !important;
+                color: white !important;
+                cursor: pointer !important;
+                transition: all 0.3s ease !important;
+                box-shadow: 0 4px 6px rgba(66, 153, 225, 0.2) !important;
+                margin: 20px auto !important;
+                display: block !important;
+                width: auto !important;
+                min-width: 200px !important;
+                text-transform: uppercase !important;
+                letter-spacing: 0.5px !important;
+            }
+
+            .custom-compare-button:hover {
+                transform: translateY(-2px) !important;
+                box-shadow: 0 6px 12px rgba(66, 153, 225, 0.3) !important;
+                background: linear-gradient(135deg, #48bb78, #4299e1) !important;
+            }
+
+            .custom-compare-button:active {
+                transform: translateY(1px) !important;
+                box-shadow: 0 2px 4px rgba(66, 153, 225, 0.2) !important;
+            }
+
+            /* 幫按鈕添加容器樣式 */
+            .button-container {
+                text-align: center;
+                padding: 20px 0;
+                background: linear-gradient(to right, rgba(66, 153, 225, 0.05), rgba(72, 187, 120, 0.05));
+                border-radius: 12px;
+                margin: 20px 0;
+            }
             """
 
         def show_comparison(breed1, breed2):