Cách tạo nút tìm kiếm (search button) với CSS

Giới thiệu

Search button (nút tìm kiếm) thường đi kèm ô input, tạo thành một khối thống nhất. Thiết kế phổ biến: input bên trái, nút icon kính lúp bên phải, cùng chiều cao, bo góc ngoài.

Ví dụ hoàn chỉnh - Search Box cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Button</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: #f5f5f5; }
    .search-box {
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      border-radius: 50px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      background: #fff;
    }
    .search-input {
      flex: 1;
      border: none;
      padding: 16px 20px;
      font-size: 16px;
      background: transparent;
    }
    .search-input:focus { outline: none; }
    .search-input::placeholder { color: #aaa; }
    .search-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }
    .search-btn:hover { background: linear-gradient(135deg, #5a6fd6, #6a4193); transform: scale(1.02); }
    .search-btn:focus-visible { outline: 3px solid rgba(102,126,234,0.4); outline-offset: -3px; }
    .search-btn i { font-size: 20px; }
  </style>
</head>
<body>
  <h1 style="text-align:center; margin-bottom:30px">Search Button Example</h1>
  <form class="search-box" role="search">
    <input type="search" class="search-input" placeholder="Tìm kiếm..." aria-label="Tìm kiếm" autocomplete="off">
    <button type="submit" class="search-btn" aria-label="Tìm kiếm"><i class="fas fa-search"></i></button>
  </form>
</body>
</html>

Các biến thể Search Button

1. Nút riêng biệt (Separate Button)

.search-form { display: flex; gap: 12px; max-width: 600px; margin: 0 auto; }
.search-input { flex: 1; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; }
.search-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.search-btn-separate {
  padding: 14px 28px;
  background: #667eea; color: #fff;
  border: none; border-radius: 8px;
  font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.search-btn-separate:hover { background: #5a6fd6; }

2. Search Button với Icon bên trong Input (Trailing)

.search-input-wrapper { position: relative; max-width: 500px; margin: 0 auto; }
.search-input-wrapper input { width: 100%; padding: 14px 56px 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; }
.search-input-wrapper input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.search-input-wrapper button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #888; cursor: pointer; padding: 8px;
}
.search-input-wrapper button:hover { color: #667eea; }

3. Expanding Search (Click icon → mở rộng input)

.expanding-search { position: relative; width: 56px; transition: width 0.3s ease; }
.expanding-search.active { width: 320px; }
.expanding-search input { width: 100%; padding: 12px 56px 12px 16px; border-radius: 24px; border: 2px solid transparent; background: #f0f0f0; opacity: 0; pointer-events: none; transition: all 0.3s; }
.expanding-search.active input { opacity: 1; pointer-events: auto; background: #fff; border-color: #667eea; }
.expanding-search button { position: absolute; right: 0; top: 0; bottom: 0; width: 56px; border-radius: 24px; background: #667eea; color: #fff; border: none; cursor: pointer; }

JS: document.querySelector('.expanding-search button').addEventListener('click', () => document.querySelector('.expanding-search').classList.toggle('active'));

Accessibility Checklist

• <form role="search"> - landmark.
• <input type="search"> - semantic type.
• aria-label trên input (nếu không có label visible).
• Nút submit có aria-label="Tìm kiếm" (icon-only).
• Enter key tự submit form (mặc định).