use shadow instead

app.py

@@ -23,5 +23,5 @@
 app.layout = layout
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=8050, debug=True)
+    app.run(host="0.0.0.0", port=8050, debug=False)
 

assets/custom.css

@@ -30,20 +30,17 @@
 }
 
 /* Removed any margin between consecutive .btn-secondary buttons */
-
 .hover-button {
     border: 4px solid transparent;
-    /* Keeps border width consistent */
-    transition: border-color 0.2s ease-in-out, outline-width 0.2s ease-in-out;
+    /* Keeps border width consistent if needed for layout */
+    transition: box-shadow 0.2s ease-in-out;
     box-sizing: border-box;
     /* Prevents padding/border from shifting layout */
 }
 
 /* Applies when hovered or when the button is marked as selected */
 .hover-button:hover,
 .hover-button.selected {
-    border-color: black !important;
-    /* Changes border color */
-    outline: 3px solid black;
-    /* Adds extra thickness */
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
+    /* A stronger shadow effect */
 }

src/callbacks/explanation_callbacks.py

@@ -64,7 +64,7 @@ def determine_hex_color(arg):
             style={
                 "margin": "5px",
                 "backgroundColor": determine_hex_color(arg),  # Set background color
-                # "border": "1px solid gray",  # Border matches color
+                "border": "1px solid gray",  # Border matches color
                 "color": "black",  # Text color
             },
         )