Thymeleaf delete button with internal css won't delete table row

HTML

This one accomplishes what I want it to do, but is just a link

<td><a th:href="@{/delete/{id}(id=${currentCourses.id})}">Delete</a></td><!-- WORKS redirects to /delete/id# -->

How do I get it to work with my internal css? I've tried these and cant get either of them to work. They just reload the page and don't delete the row.

<td><button class="button buttonDelete" th:href="@{/delete/{id}(id=${currentCourses.id})}">Delete</button></td>

<td><a th:href="@{/delete/{id}(id=${currentCourses.id})}"class="button buttonDelete">Delete</a></td>

CSS

.buttonDelete {
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

Full HTML where button is located(its messy, its a work in progress):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>View All Courses - Administrator</title>
</head>
<style>
th {
    background-color: #87CEEB;
    color: black;
    font-weight: bold;
    font-size: 110%;
    font-style: normal;
    text-align: center;
    vertical-align: center;
}

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.buttonAdd {
    background-color: lightgreen;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.buttonEdit {
    background-color: yellow;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.buttonDelete {
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.tableContents {
    text-align: left;
}
</style>
<body>
    <select id="subject">
        <option value="" disabled selected>Select Search Parameter</option>
        <option value="0">ID</option>
        <option value="1">CRN</option>
        <option value="2">Course Title</option>
        <option value="3">Enrolled</option>
        <option value="4">Teacher</option>
        <option value="5">Email</option>
    </select>
    <input type="text" id="searchInput" onkeyup="selectedSearch()" placeholder="Search">
    <form action="@{/delete/{id}(id=${currentCourses.id})}" method="get">
        <table id="adminTable">
            <tr>
                <th>ID</th>
                <th>CRN</th>
                <th>Course Title</th>
                <!-- <th>Students Enrolled</th> -->
                <th>Teacher</th>
                <th>Email</th>
            </tr>
            <tr th:each="currentCourses, rowStat : ${courses}"> 
                <td th:text="${currentCourses.id}" />
                <td th:text="${currentCourses.courseId}" />
                <td th:text="${currentCourses.courseName}" />
                <!--   <td th:text="${currentCourses.courseApplied}" />-->
                <td th:text="${currentCourses.teacher.lastName}" />
                <td th:text="${currentCourses.teacher.email}" />
                
                <!--  <td><button class="button buttonEdit" th:href="@{/edit/{id}(id=${currentCourses.id})}">Edit</button></td><!-- Stylized button, needs work -->
                <td><a th:href="@{/edit/{id}(id=${currentCourses.id})}">Edit</a></td><!-- WORKS redirects to /delete/id# -->
                 <!--<td><button class="button buttonDelete" th:action="@{/delete/{id}(id=${currentCourses.id})}">Delete1</button></td><!-- Stylized button, needs work -->         
                <td><a th:href="@{/delete/{id}(id=${currentCourses.id})}">Delete</a></td><!-- WORKS redirects to /delete/id# -->
              

            </tr>
            
        </table>
    </form>
    <button class="button buttonAdd" onclick="window.location.href='/inputCourse';">Add</button>

    <script>

var menu = document.getElementById("subject");
menu.addEventListener("change", selectedSearch);

function selectedSearch(event) {
  if (menu.value == '0') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  } else if (menu.value == '1') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  } else if (menu.value == '2') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
    }
  } else if (menu.value == '3') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
    }
  } else if (menu.value == '4') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }   
    }
  } else if (menu.value == '5') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[5];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }  
    }
  } else if (menu.value == '6') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[6];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  } 
  }
}


</script>
</body>
</html>

Controller

    @GetMapping("/delete/{id}")
    public String deleteCourse(@PathVariable("id") long id, Model model) {
        Course c = repo.findById(id).orElse(null);
        repo.delete(c);
        return viewAllCourses(model);
    }

Solution

The element does not have the href attribute. If you want to use a button you need to place it in a form element

<form action="@{/delete/{id}(id=${currentCourses.id})}" method="get">
    <button type="submit">Delete</button>
</form>

Otherwise, you can use the anchor element, adding some properties to the css

.buttonDelete {
    display: block;
    padding: .5em 1em;
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}