Adding button text for filter

UoaWDCC · Jul 26, 2024 · 32ca502 · 32ca502
1 parent aa5c31b
commit 32ca502
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/web/src/pages/events/index.astro b/web/src/pages/events/index.astro
@@ -10,11 +10,10 @@ import Layout from "@/layouts/layout.astro";
       We aim to help students develop practical skills that can be used in the workforce.
       We host social events to help students network among peers and with industry people.
     </p>
-    <button
-      class="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      onClick={handleFilterClick}
-    >
-      Filter
-    </button>
+
+    <!-- filter button -->
+    <div class="my-4">
+    <button class="filter-button">Filter By</button>
+    </div>
   </section>
-</Layout>
+</Layout>
diff --git a/web/src/pages/events/styles.css b/web/src/pages/events/styles.css
@@ -0,0 +1,12 @@
+.filter-button {
+  background-color: #b3e5fc; /* Light blue */
+  border: none;
+  padding: 10px 20px;
+  border-radius: 25px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.filter-button:focus {
+  outline: none;
+}