Cách tạo nút văn bản (text button) với CSS

Giới thiệu

Nút văn bản (text button) là nút chỉ hiển thị chữ mà không có viền hay nền phức tạp, thường dùng cho các hành động thứ cấp như "Hủy", "Tìm hiểu thêm", hoặc các nút trong toolbar. CSS cho phép tùy biến màu sắc, trạng thái hover/focus dễ dàng.

Ví dụ hoàn chỉnh - 5 kiểu nút văn bản theo ngữ nghĩa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Button CSS</title>
  <style>
    .text-btn {
      border: none;
      background: transparent;
      font-weight: 600;
      padding: 10px 16px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 6px;
      transition: background-color 0.2s ease;
    }
    .text-btn:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
    /* Success - Xanh lá: hành động thành công, xác nhận */
    .btn-success { color: #4caf50; }
    .btn-success:hover { background-color: #e8f5e9; }
    /* Info - Xanh dương: thông tin, liên kết */
    .btn-info { color: #2196f3; }
    .btn-info:hover { background-color: #e3f2fd; }
    /* Warning - Cam/Vàng: cảnh báo, cần chú ý */
    .btn-warning { color: #ff9800; }
    .btn-warning:hover { background-color: #fff3e0; }
    /* Danger - Đỏ: hành động hủy xóa, nguy hiểm */
    .btn-danger { color: #f44336; }
    .btn-danger:hover { background-color: #fce4ec; }
    /* Default - Xám: hành động trung tính */
    .btn-default { color: #333; }
    .btn-default:hover { background-color: #f5f5f5; }
  </style>
</head>
<body>
  <h1>Các kiểu Text Button</h1>
  <button class="text-btn btn-success">Success</button>
  <button class="text-btn btn-info">Info</button>
  <button class="text-btn btn-warning">Warning</button>
  <button class="text-btn btn-danger">Danger</button>
  <button class="text-btn btn-default">Default</button>
</body>
</html>

Các nguyên tắc thiết kế

• Màu sắc ngữ nghĩa: Mỗi màu truyền tải ý nghĩa riêng (xanh lá = tích cực, đỏ = nguy hiểm, xanh dương = trung tính/thông tin).
• Không viền, nền trong suốt: Đặc điểm nhận diện của text button.
• Hiệu ứng hover nhẹ: Chỉ đổi nền (background-color) với độ trong suốt thấp, không đổi màu chữ.
• Accessibility: Luôn có :focus-visible cho người dùng bàn phím.

Khi nào dùng Text Button?

• Hành động thứ cấp (secondary action) bên cạnh Primary Button (nút chính có nền đậm).
• Toolbar, header, footer nơi không gian hạn chế.
• Link được thiết kế như nút (ví dụ: "Xem thêm", "Quên mật khẩu").

Mở rộng: Text Button có icon

<button class="text-btn btn-info">
  <i class="fas fa-download"></i> Tải về
</button>