style download buttons

website/src/css/download-card.module.css

@@ -1,11 +1,13 @@
 :root {
   --contrasting-background: #c4b7f5;
   --container-border: 1px solid #adadad; /* Light gray border */
+  --button-background-hover: #9c84f9;
 }
 
 [data-theme="dark"] {
   --contrasting-background: #4b359f;
   --container-border: 1px solid #6d6d6d; /* Light gray border */
+  --button-background-hover: #251463;
 }
 
 .downloadContainer {
@@ -54,6 +56,24 @@
   margin-bottom: 20px; /* Add some space between the list and the footer */
 }
 
+.downloadCard li {
+    display: inline-block; /* Allows width and height to be set */
+    margin: 5px; /* Spacing between buttons */
+    padding: 10px 15px; /* Size of the button */
+    text-align: center; /* Centers text within the button */
+    text-decoration: none; /* Removes the underline from links */
+    background-color: var(--contrasting-background); /* Background color - Bootstrap primary button color */
+    border: 1px var(--container-border); /* Border color - same as background for a solid button */
+    border-radius: 18px; /* Rounded corners */
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.downloadCard li:hover, .downloadCard li:focus {
+    background-color: var(--button-background-hover);
+    text-decoration: none; /* Ensures the text remains with no underline on hover/focus */
+    outline: none; /* Removes the outline on focus for a clean look */
+}
+
 .downloadCard h3 {
   margin-top: 10px;
 }