Thay đổi màu nền button với CSS (background-color)

Thuộc tính background-color cho Button

background-color đặt màu nền cho button. Kết hợp với `color` (màu chữ), `border`, `border-radius`, `padding` tạo button hoàn chỉnh.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background-color: yellow;  /* Màu nền vàng */
      color: black;              /* Màu chữ đen */
      text-align: center;
      font-size: 13px;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="btn">Result</button>
</body>
</html>

Các giá trị màu (Color Values)

Loại	Cú pháp	Ví dụ
Tên màu	`red, blue, transparent`	`background-color: red;`
Hex	`#rgb, #rrggbb, #rrggbbaa`	`#ff0000`, `#ff0000ff` (có alpha)
RGB/RGBA	`rgb(r,g,b), rgba(r,g,b,a)`	`rgb(255,0,0)`, `rgba(255,0,0,0.8)`
HSL/HSLA	`hsl(h,s%,l%), hsla(h,s%,l%,a)`	`hsl(0,100%,50%)`, `hsla(0,100%,50%,0.8)`
CSS Variable	`var(--color-primary)`	Design system token
Gradient	`linear-gradient(...)`	Cần `background-image`, không phải background-color

Button Variants (Hệ thống button)

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #64748b;
  --color-danger: #dc2626;
  --color-success: #16a34a;
}

.btn {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-primary { background-color: var(--color-primary); color: white; }
.btn-primary:hover { background-color: var(--color-primary-hover); }

.btn-secondary { background-color: var(--color-secondary); color: white; }

.btn-danger { background-color: var(--color-danger); color: white; }

.btn-success { background-color: var(--color-success); color: white; }

.btn-outline { 
  background-color: transparent; 
  border: 2px solid var(--color-primary); 
  color: var(--color-primary); 
}
.btn-outline:hover { background-color: var(--color-primary); color: white; }

.btn-ghost { background-color: transparent; color: var(--color-primary); }
.btn-ghost:hover { background-color: rgba(37,99,235,0.1); }

/* 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 ý quan trọng

Button mặc định có `background: buttonface` (hệ điều hành) - **phải reset** `background-color` hoặc `background: none`.
`border: none` loại bỏ border mặc định (thường 2px inset/outset).
Kết hợp `color` (màu chữ) đảm bảo contrast ratio ≥ 4.5:1.
Dùng CSS Custom Properties (variables) cho design system nhất quán.