Update the style of buttons.

CHANGELOG.org

@@ -23,4 +23,6 @@
    Add the cancel button for a task form.
 ** 0.3.4 <2023-07-21 Fri>
    Add right alignment for buttons in a task item.
+** 0.3.5 <2023-07-22 Sat>
+   Update the style of buttons.
 

templates/partials/task_item.html

@@ -14,12 +14,19 @@
   <button type="button"
 	  hx-post="{% url 'tasks:task-update' task.id %}"
 	  hx-swap="outerHTML"
-	  class="ml-auto">
+	  class="inline-block px-5 py-1.5 bg-blue-600 text-white font-medium text-xs leading-tight
+          uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700
+          focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg
+          transition duration-150 ease-in-out ml-auto">
     Update
   </button>
   <button type="button"
 	  hx-post="{% url 'tasks:task-delete' task.id %}"
-	  hx-swap="outerHTML">
+	  hx-swap="outerHTML"
+	  class="inline-block px-5 py-1.5 bg-red-600 text-white font-medium text-xs leading-tight
+          uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700
+          focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg
+          transition duration-150 ease-in-out">
     Delete
   </button>
 </div>

templates/tasks/index.html

@@ -4,7 +4,14 @@
 {% block content %}
   <h1 class="text-3xl font-bold text-center my-2">Tasks</h1>
 
-  <button type="button" hx-get="{% url 'tasks:create-task-form' %}" hx-target="#task-items" hx-swap="beforeend">
+  <button type="button"
+	  hx-get="{% url 'tasks:create-task-form' %}"
+	  hx-target="#task-items"
+	  hx-swap="beforeend"
+	  class="inline-block px-14 py-2.5 bg-green-600 text-white font-medium text-xs leading-tight
+          uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700
+          focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg
+          transition duration-150 ease-in-out mx-auto">
     Add a new task
   </button>