improved button styling on appointments.html

public/html/appointments.html

@@ -41,8 +41,6 @@
         <!-- Data will be inserted here via JavaScript -->
         </tbody>
     </table>
-    <!-- TODO implement redirect -->
-    <button id="add-appointment">Add Appointment</button>
 </div>
 </div>
 </body>

public/javascripts/appointments.js

@@ -41,9 +41,11 @@ function renderAppointments(data) {
         const deleteButton = document.createElement('button');
         participantATag.href = `/html/bookings.html?appointment=${appointment._id}`;
         participantATag.innerText = 'participants';
+        participantATag.classList.add('participants-link');
         editATag.href = `/html/appointmentscreator.html?appointment=${appointment._id}`;
         shareATag.href = `/html/schedule.html?appointment=${appointment._id}`;
         shareATag.innerText = 'share';
+        shareATag.classList.add('share-link');
         editATag.innerText = 'edit';
         deleteButton.onclick = async () => {
             if (last_clicked !== appointment._id) {

public/stylesheets/appointments.css

@@ -18,6 +18,47 @@
     overflow-x: auto; /* Ensure content is scrollable on smaller screens */
 }
 
+/* Modern A-Tag Styling */
+td a {
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    color: #ffffff;
+    font-size: 14px;
+    background-color: #54ccac;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+td a.share-link {
+    background-color: #7ccc54;
+}
+
+td a.participants-link {
+    background-color: #cc54c6;
+}
+
+td a:hover {
+    background-color: #5750d9;
+    transform: translateY(-2px);
+}
+
+/* Modern Button Styling */
+td button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    color: white;
+    background-color: #ff6b6b;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+td button:hover {
+    background-color: #e05555;
+    transform: translateY(-2px);
+}
+
 h2 {
     text-align: center;
     color: #333333;