Cách tạo nút tròn (round button) với CSS

Giới thiệu

Nút tròn là một yếu tố giao diện phổ biến, thường dùng cho các hành động nổi bật như nút thêm (+), menu tròn, hoặc các biểu tượng tương tác. Với CSS, chúng ta có thể dễ dàng tạo nút tròn hoàn hảo bằng thuộc tính border-radius: 50%.

Ví dụ hoàn chỉnh

Dưới đây là mã HTML/CSS tạo 2 nút tròn với hiệu ứng hover khác nhau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nút tròn với CSS</title>
  <style>
    .btn-round {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: 24px;
      font-weight: bold;
      text-decoration: none;
      color: #fff;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .btn-round:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .btn-gray {
      background-color: #acacac;
      color: #333;
    }
    .btn-gray:hover {
      background-color: #ddd;
    }
    .btn-purple {
      background-color: #441e70;
    }
    .btn-purple:hover {
      background-color: #792585;
    }
  </style>
</head>
<body>
  <h1>Ví dụ nút tròn (Round Button)</h1>
  <a href="#" class="btn-round btn-gray">50%</a>
  <a href="#" class="btn-round btn-purple">50%</a>
</body>
</html>

Giải thích kỹ thuật quan trọng

• border-radius: 50%: Tạo hình tròn hoàn hảo khi width = height.
• display: inline-flex kết hợp align-items/justify-content: center: Căn giữa nội dung cả ngang lẫn dọc.
• transition: Tạo hiệu ứng mượt mà khi hover.
• box-shadow: Thêm chiều sâu, nút trông nổi bật hơn.

Mẹo mở rộng

Bạn có thể thay nội dung "50%" bằng biểu tượng Font Awesome hoặc SVG:

<a href="#" class="btn-round btn-purple">
  <i class="fas fa-plus"></i>
</a>

Hoặc dùng thẻ <button> thay vì <a> nếu nút dùng cho hành động form.

Kết quả mong đợi

Hai nút tròn nằm ngang nhau, nút xám và nút tím. Khi di chuột qua, nút sẽ nhô lên nhẹ và đổ bóng đậm hơn.