update : adaptive button for smaller screen size

Author: paullyy8

index.html

@@ -19,7 +19,8 @@ <h1><span class="material-icons-round">check_circle</span> Taskify</h1>
             <span class="material-icons-round light-icon">light_mode</span>
           </button>
           <button id="newTaskBtn" class="new-task-btn">
-            <span class="material-icons-round">add</span> New Task
+            <span class="material-icons-round icon-add">add</span>
+            <span class="btn-text">New Task</span>
           </button>
         </div>
       </div>

styles.css

@@ -659,4 +659,69 @@ body {
   .filter-group {
     flex: 1 1 40%;
   }
+}
+/* New Task Button */
+.new-task-btn {
+  background: var(--primary);
+  color: var(--text);
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: var(--transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.new-task-btn:hover {
+  background: var(--primary-dark);
+}
+
+.new-task-btn .icon-add {
+  display: flex;
+}
+
+.new-task-btn .btn-text {
+  transition: opacity 0.2s ease;
+}
+
+/* Mobile adaptation */
+@media (max-width: 480px) {
+  .new-task-btn {
+    padding: 10px;
+    width: 40px;
+    justify-content: center;
+  }
+  
+  .new-task-btn .btn-text {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+  }
+  
+  .new-task-btn::after {
+    content: attr(aria-label);
+    position: absolute;
+    background: rgba(0,0,0,0.8);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.2s;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+  
+  .new-task-btn:hover::after {
+    opacity: 1;
+  }
 }