Thay đổi padding của button với CSS

Thuộc tính padding cho Button

padding tạo khoảng cách giữa **nội dung (text/icon)** và **viền (border)** của button. Làm button to hơn, dễ click hơn (touch target ≥ 44px).

Cú pháp

padding: <top-bottom> <left-right>;
/* Hoặc 4 giá trị: */
padding: top right bottom left; /* Theo chiều kim đồng hồ */

Ví dụ: Padding 10px

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 10px;           /* Padding đều 4 phía */
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="button">Result</button>
</body>
</html>

Các mẫu Padding phổ biến cho Button

Loại Button	Padding	Kích thước min (Touch target)
Small / Ghost	`padding: 6px 12px;`	32px height
Default / Medium	`padding: 10px 20px; / 12px 24px;`	40-44px height
Large / Primary	`padding: 16px 32px; / 14px 28px;`	48-56px height
Icon only (Square)	`padding: 10px; / width: 44px; height: 44px;`	44x44px (WCAG)
Icon + Text	`padding: 10px 16px; gap: 8px; (flex)`	44px height

Button Style Hiện Đại (Complete)

.btn {
  /* Reset browser default */
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  
  /* Custom style */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Variants */
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #e5e7eb; color: #1f2937; }
.btn-secondary:hover { background: #d1d5db; }
.btn-outline { border: 2px solid #2563eb; color: #2563eb; background: transparent; }
.btn-outline:hover { background: #2563eb; color: white; }

/* States */
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

Lưu ý

Padding ảnh hưởng `width`/`height` nếu `box-sizing: border-box` (mặc định hiện nay).
Đảm bảo **minimum touch target 44x44px** (WCAG 2.1 AA) cho mobile.
Dùng `inline-flex` + `gap` cho icon + text thay vì padding trái/phải bất đối xứng.