Cách tạo nút Next / Previous (tiếp theo / quay lại) với CSS

Giới thiệu

Nút điều hướng Next/Previous (tiếp theo/quay lại) thường dùng trong phân trang (pagination), slideshow, wizard form, hoặc xem chi tiết bài viết. Thiết kế phổ biến là nút tròn hoặc bo tròn, có mũi tên chỉ hướng.

Ví dụ hoàn chỉnh - Nút tròn với mũi tên

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Next Previous Buttons</title>
  <style>
    .nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 22px;
      font-weight: bold;
      text-decoration: none;
      color: #fff;
      transition: all 0.25s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .nav-btn:focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 3px;
    }
    .btn-prev {
      background: #acacac;
      color: #333;
    }
    .btn-prev:hover { background: #ddd; }
    .btn-next {
      background: #441e70;
    }
    .btn-next:hover { background: #792585; }
    /* Mũi tên dùng pseudo-element cho dễ tùy biến */
    .nav-btn::before { display: inline-block; line-height: 1; }
    .btn-prev::before { content: "\2039"; } /* ‹ */
    .btn-next::before { content: "\203A"; } /* › */
  </style>
</head>
<body>
  <h1 style="text-align:center; margin-top:40px">Điều hướng Prev / Next</h1>
  <div style="text-align:center; gap:20px; display:flex; justify-content:center; flex-wrap:wrap">
    <a href="#" class="nav-btn btn-prev" aria-label="Trang trước"></a>
    <a href="#" class="nav-btn btn-next" aria-label="Trang sau"></a>
  </div>
</body>
</html>

Các biến thể phổ biến

1. Nút có chữ + mũi tên (dạng pill)

.nav-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px; /* pill */
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-prev-text { background: #eee; color: #333; }
.btn-prev-text:hover { background: #ddd; }
.btn-next-text { background: #441e70; color: #fff; }
.btn-next-text:hover { background: #792585; }

HTML: <button class="nav-btn-text btn-prev-text"><span>‹</span> Quay lại</button>

2. Nút mũi tên đơn giản (chỉ icon, không nền)

.arrow-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #441e70;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.arrow-btn:hover { color: #792585; transform: translateX(4px); }
.arrow-btn.prev:hover { transform: translateX(-4px); }

Mẹo UX

• Luôn có aria-label cho screen reader ("Trang trước", "Trang sau").
• Trên mobile, nút Prev/Next nên đủ lớn (≥ 44px) và cách nhau rõ rệt.
• Trong slideshow: Prev ở trái, Next ở phải (theo tư duy LTR).
• Disable nút khi ở đầu/cuối: disabled + opacity: 0.4; pointer-events: none;