Cách tạo nút pill (pill button - bo tròn hoàn toàn) với CSS

Giới thiệu

Pill button (nút hình viên thuốc) có bo góc bằng một nửa chiều cao (border-radius: 999px hoặc giá trị lớn), tạo hình elip tròn hai đầu. Đây là kiểu nút phổ biến trong Material Design, iOS, và các design system hiện đại.

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>Pill Buttons CSS</title>
  <style>
    .pill-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 24px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      color: #333;
      background: #c1ffec;
      border: none;
      border-radius: 999px; /* Quan trọng: giá trị lớn hơn height/2 */
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .pill-btn:hover {
      background: #9affe1;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    }
    .pill-btn:focus-visible {
      outline: 3px solid rgba(193, 255, 236, 0.6);
      outline-offset: 2px;
    }
    .pill-btn:active { transform: scale(0.98); }
    /* Biến thể màu */
    .pill-btn-primary { background: #1eadef; color: #fff; }
    .pill-btn-primary:hover { background: #1598d3; }
    .pill-btn-danger { background: #ffebee; color: #c62828; }
    .pill-btn-danger:hover { background: #ffcdd2; }
    .pill-btn-outline {
      background: transparent;
      border: 2px solid #1eadef;
      color: #1eadef;
    }
    .pill-btn-outline:hover { background: #1eadef; color: #fff; }
  </style>
</head>
<body>
  <h1 style="text-align:center; margin:40px 0">Pill Buttons - Các biến thể</h1>
  <div style="text-align:center; display:flex; gap:16px; justify-content:center; flex-wrap:wrap">
    <button class="pill-btn">Mặc định</button>
    <button class="pill-btn pill-btn-primary">Chính (Primary)</button>
    <button class="pill-btn pill-btn-danger">Nguy hiểm</button>
    <button class="pill-btn pill-btn-outline">Outline</button>
  </div>
</body>
</html>

Tại sao dùng 999px thay vì 50%?

• border-radius: 50% tạo hình tròn chỉ khi width = height.
• border-radius: 999px (hoặc bất kỳ giá trị lớn ≥ height/2) tạo bo tròn hai đầu dù width bất kỳ - đây là "pill".

Các kích thước chuẩn (Size Variants)

.pill-btn-sm { padding: 6px 16px; font-size: 13px; }
.pill-btn-lg { padding: 12px 28px; font-size: 18px; }

Pill Button với Icon

<button class="pill-btn pill-btn-primary">
  <i class="fas fa-download"></i>
  <span>Tải về</span>
</button>

CSS thêm: .pill-btn i { margin-right: 8px; font-size: 1em; }