Cách tạo nút block (full-width) với CSS

Giới thiệu

Nút block (block button) chiếm toàn bộ chiều rộng của container cha, thường dùng cho nút hành động chính trên mobile, form đăng nhập/đăng ký, hoặc CTA (Call to Action) quan trọng. CSS chỉ cần display: block; width: 100%.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Button CSS</title>
  <style>
    .block-btn {
      display: block;
      width: 100%;
      max-width: 400px; /* Giới hạn trên màn hình rộng */
      margin: 0 auto;   /* Căn giữa nếu container rộng hơn */
      padding: 16px 24px;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      background-color: #130069;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, transform 0.1s ease;
    }
    .block-btn:hover {
      background-color: #84a1ff;
      color: #000;
    }
    .block-btn:active {
      transform: scale(0.98);
    }
    .block-btn:focus-visible {
      outline: 3px solid rgba(19, 0, 105, 0.4);
      outline-offset: 2px;
    }
    .container {
      max-width: 480px;
      margin: 40px auto;
      padding: 0 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 style="text-align:center">Block Button Example</h1>
    <button class="block-btn">Đăng ký ngay</button>
  </div>
</body>
</html>

Điểm quan trọng

• max-width: Trên desktop, nút không nên kéo dài toàn màn hình (khó bấm). Thêm max-width và margin: 0 auto.
• padding đủ lớn: Đảm bảo vùng chạm (tap target) ≥ 44×44px (chuẩn WCAG).
• Responsive: Trên mobile, nút tự co full màn hình nhờ width: 100%.

Biến thể: Block Button với outline

.block-btn-outline {
  background: transparent;
  border: 2px solid #130069;
  color: #130069;
}
.block-btn-outline:hover {
  background: #130069;
  color: #fff;
}