Trong series này:

HTML + CSS + JS kết hợp Layout cơ bản với HTML và CSS Navigation bar responsive Card, Button và Badge Components Modal, Tabs và Accordion Dark Mode Toggle Validate Form thời gian thực
Sửa trang này

Card, Button và Badge Components

Component UI là gì?

Component là đơn vị giao diện tái sử dụng — button, card, badge, alert, v.v. Xây dựng chúng từ đầu giúp bạn hiểu cách các thư viện UI như Bootstrap hoạt động.

Button Variants

    Kết quả 
    <div class="demo" style="display:flex;flex-wrap:wrap;gap:0.75rem;padding:1rem;align-items:center">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn btn-outline">Outline</button>
  <button class="btn btn-ghost">Ghost</button>
  <button class="btn btn-primary btn-sm">Nhỏ</button>
  <button class="btn btn-primary btn-lg">Lớn</button>
  <button class="btn btn-primary" disabled>Disabled</button>
  <button class="btn btn-primary loading">⏳ Loading…</button>
</div>

    .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.loading { opacity: 0.55; pointer-events: none; }

.btn-primary   { background: #4472c4; color: white; }
.btn-secondary { background: #6c757d; color: white; }
.btn-success   { background: #2ecc71; color: white; }
.btn-danger    { background: #e74c3c; color: white; }
.btn-outline   { border-color: #4472c4; color: #4472c4; background: transparent; }
.btn-outline:hover { background: #4472c4; color: white; }
.btn-ghost     { background: transparent; color: #555; }
.btn-ghost:hover { background: #f0f0f0; }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.5rem;  font-size: 1rem;   }

    Card Component

      Kết quả 
      <div style="display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background:#f3f4f6">
  <div class="card">
    <div class="card-img" style="background:linear-gradient(135deg,#4472c4,#6fa3ef)">
      <span class="badge badge-new">Mới</span>
    </div>
    <div class="card-body">
      <h3>Khoá học HTML & CSS</h3>
      <p>Học xây dựng trang web từ cơ bản đến nâng cao.</p>
    </div>
    <div class="card-footer">
      <span class="badge badge-free">Miễn phí</span>
      <button class="btn btn-primary btn-sm">Bắt đầu →</button>
    </div>
  </div>

  <div class="card">
    <div class="card-img" style="background:linear-gradient(135deg,#ed7d31,#f5a623)">
      <span class="badge badge-hot">🔥 Hot</span>
    </div>
    <div class="card-body">
      <h3>JavaScript Nâng cao</h3>
      <p>ES6+, DOM, Fetch API và các pattern hiện đại.</p>
    </div>
    <div class="card-footer">
      <span class="price">299.000 ₫</span>
      <button class="btn btn-success btn-sm">Mua ngay</button>
    </div>
  </div>
</div>

      * { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; }

.card {
  width: 220px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }

.card-img {
  height: 110px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.5rem;
}

.badge {
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: bold;
}
.badge-new  { background: #2ecc71; color: white; }
.badge-hot  { background: #e74c3c; color: white; }
.badge-free { background: #f0f0f0; color: #555;  }

.card-body { padding: 0.85rem; }
.card-body h3 { font-size: 0.95rem; margin-bottom: 0.35rem; color: #222; }
.card-body p  { font-size: 0.82rem; color: #666; line-height: 1.45; }

.card-footer {
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}
.price { font-weight: bold; color: #e74c3c; font-size: 0.9rem; }

.btn { display:inline-flex;align-items:center;padding:0.3rem 0.75rem;border:none;border-radius:6px;font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s; }
.btn:hover { opacity: 0.88; }
.btn-primary { background:#4472c4;color:white; }
.btn-success { background:#2ecc71;color:white; }
.btn-sm {}

      Bình luận