Bạn đang tìm kiếm các **nút button** đẹp và dễ tùy chỉnh cho dự án web của mình? Dưới đây là bộ sưu tập CSS cho nhiều loại nút button khác nhau, từ cơ bản đến hiệu ứng phức tạp, đi kèm với các biến thể màu sắc phổ biến.
Bạn có thể dễ dàng sử dụng các đoạn code này bằng cách sao chép và dán vào file CSS của mình, sau đó thêm class tương ứng vào thẻ <button> hoặc <a> trong HTML.
1. Nút Button Cơ Bản (Basic Buttons)
Phong cách sạch sẽ, thanh lịch, dễ dàng điều chỉnh, phù hợp với mọi loại giao diện.
Cách sử dụng HTML:
<button class="button-basic primary">Primary</button>
<button class="button-basic success">Success</button>
<button class="button-basic info">Info</button>
<button class="button-basic warning">Warning</button>
<button class="button-basic danger">Danger</button>
<button class="button-basic secondary">Secondary Basic</button>CSS cơ bản và phiên bản màu:
/* Button Basic */
.button-basic {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-basic.primary { background-color: #007bff; color: white; }
.button-basic.primary:hover { background-color: #0056b3; }
.button-basic.primary:active { background-color: #004085; }
.button-basic.success { background-color: #28a745; color: white; }
.button-basic.success:hover { background-color: #218838; }
.button-basic.success:active { background-color: #1e7e34; }
.button-basic.info { background-color: #17a2b8; color: white; }
.button-basic.info:hover { background-color: #138496; }
.button-basic.info:active { background-color: #117a8b; }
.button-basic.warning { background-color: #ffc107; color: #333; }
.button-basic.warning:hover { background-color: #e0a800; }
.button-basic.warning:active { background-color: #cc9500; }
.button-basic.danger { background-color: #dc3545; color: white; }
.button-basic.danger:hover { background-color: #c82333; }
.button-basic.danger:active { background-color: #bd2130; }
/* -- Màu Secondary (Xám) -- */
.button-basic.secondary { background-color: #6c757d; color: white; }
.button-basic.secondary:hover { background-color: #5a6268; }
.button-basic.secondary:active { background-color: #4e555b; }
2. Nút Button Viền (Outline Buttons)
Thiết kế tối giản với đường viền, đổi màu khi di chuột, lý tưởng cho các hành động phụ.
Cách sử dụng HTML:
<button class="button-outline primary">Primary</button>
<button class="button-outline success">Success</button>
<button class="button-outline info">Info</button>
<button class="button-outline warning">Warning</button>
<button class="button-outline danger">Danger</button>
<button class="button-outline secondary">Secondary Outline</button>CSS cơ bản và phiên bản màu:
/* Button Outline */
.button-outline {
background-color: transparent;
padding: 10px 20px;
border-width: 2px;
border-style: solid;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.button-outline.primary { color: #007bff; border-color: #007bff; }
.button-outline.primary:hover { background-color: #007bff; color: white; }
.button-outline.primary:active { background-color: #0056b3; border-color: #0056b3; }
.button-outline.success { color: #28a745; border-color: #28a745; }
.button-outline.success:hover { background-color: #28a745; color: white; }
.button-outline.success:active { background-color: #218838; border-color: #218838; }
.button-outline.info { color: #17a2b8; border-color: #17a2b8; }
.button-outline.info:hover { background-color: #17a2b8; color: white; }
.button-outline.info:active { background-color: #138496; border-color: #138496; }
.button-outline.warning { color: #ffc107; border-color: #ffc107; }
.button-outline.warning:hover { background-color: #ffc107; color: #333; }
.button-outline.warning:active { background-color: #e0a800; border-color: #e0a800; }
.button-outline.danger { color: #dc3545; border-color: #dc3545; }
.button-outline.danger:hover { background-color: #dc3545; color: white; }
.button-outline.danger:active { background-color: #c82333; border-color: #c82333; }3. Nút Button Đổ Bóng (Shadow Buttons)
Tạo hiệu ứng nổi bật và chiều sâu cho nút, mang lại cảm giác "có thể nhấn được".
Cách sử dụng HTML:
<button class="button-shadow primary">Primary</button>
<button class="button-shadow success">Success</button>
<button class="button-shadow info">Info</button>
<button class="button-shadow warning">Warning</button>
<button class="button-shadow danger">Danger</button>
<button class="button-shadow secondary">Secondary Shadow</button>CSS cơ bản và phiên bản màu:
/* Button Shadow */
.button-shadow {
padding: 12px 25px;
border: none;
border-radius: 8px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.button-shadow.primary { background-color: #007bff; color: white; }
.button-shadow.primary:hover { box-shadow: 0 8px 16px 0 rgba(0,123,255,0.3); transform: translateY(-2px); }
.button-shadow.primary:active { box-shadow: 0 2px 4px 0 rgba(0,123,255,0.2); transform: translateY(0); }
.button-shadow.success { background-color: #28a745; color: white; }
.button-shadow.success:hover { box-shadow: 0 8px 16px 0 rgba(40,167,69,0.3); transform: translateY(-2px); }
.button-shadow.success:active { box-shadow: 0 2px 4px 0 rgba(40,167,69,0.2); transform: translateY(0); }
.button-shadow.info { background-color: #17a2b8; color: white; }
.button-shadow.info:hover { box-shadow: 0 8px 16px 0 rgba(23,162,184,0.3); transform: translateY(-2px); }
.button-shadow.info:active { box-shadow: 0 2px 4px 0 rgba(23,162,184,0.2); transform: translateY(0); }
.button-shadow.warning { background-color: #ffc107; color: #333; }
.button-shadow.warning:hover { box-shadow: 0 8px 16px 0 rgba(255,193,7,0.3); transform: translateY(-2px); }
.button-shadow.warning:active { box-shadow: 0 2px 4px 0 rgba(255,193,7,0.2); transform: translateY(0); }
.button-shadow.danger { background-color: #dc3545; color: white; }
.button-shadow.danger:hover { box-shadow: 0 8px 16px 0 rgba(220,53,69,0.3); transform: translateY(-2px); }
.button-shadow.danger:active { box-shadow: 0 2px 4px 0 rgba(220,53,69,0.2); transform: translateY(0); }4. Nút Button Gradient
Hiệu ứng chuyển màu hiện đại và sống động, tạo điểm nhấn mạnh mẽ.
Cách sử dụng HTML:
<button class="button-gradient primary">Primary</button>
<button class="button-gradient success">Success</button>
<button class="button-gradient info">Info</button>
<button class="button-gradient warning">Warning</button>
<button class="button-gradient danger">Danger</button>
<button class="button-gradient secondary">Secondary Gradient</button>CSS cơ bản và phiên bản màu:
/* Button Gradient */
.button-gradient {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-size: 200% auto;
cursor: pointer;
transition: 0.5s;
}
.button-gradient:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.button-gradient:active {
background-position: left center;
transform: translateY(1px);
}
.button-gradient.primary { background-image: linear-gradient(to right, #007bff 0%, #00c6ff 51%, #007bff 100%); color: white; }
.button-gradient.success { background-image: linear-gradient(to right, #28a745 0%, #20c997 51%, #28a745 100%); color: white; }
.button-gradient.info { background-image: linear-gradient(to right, #17a2b8 0%, #6f42c1 51%, #17a2b8 100%); color: white; }
.button-gradient.warning { background-image: linear-gradient(to right, #ffc107 0%, #fd7e14 51%, #ffc107 100%); color: white; }
.button-gradient.danger { background-image: linear-gradient(to right, #dc3545 0%, #e83e8c 51%, #dc3545 100%); color: white; }
5. Nút Button Vẩy Sáng (Ghost Buttons)
Thiết kế tối giản, sang trọng, đặc biệt hiệu quả khi đặt trên nền hình ảnh hoặc nền tối.
Cách sử dụng HTML:
<div class="button-section button-ghost-showcase">
<div class="button-group">
<button class="button-ghost primary">Primary Ghost</button>
<button class="button-ghost success">Success Ghost</button>
<button class="button-ghost info">Info Ghost</button>
<button class="button-ghost warning">Warning Ghost</button>
<button class="button-ghost danger">Danger Ghost</button>
<button class="button-ghost secondary">Secondary Ghost</button>
</div>
</div>CSS cơ bản và phiên bản màu:
/* Button Ghost */
.button-ghost {
background-color: transparent;
padding: 12px 25px;
border-width: 2px;
border-style: solid;
border-radius: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.button-ghost-showcase {
background-color: #333;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.button-ghost.primary { color: #007bff; border-color: #007bff; }
.button-ghost.primary:hover { background-color: #007bff; color: white; }
.button-ghost.primary:active { background-color: #0056b3; color: white; }
.button-ghost.success { color: #28a745; border-color: #28a745;}
.button-ghost.success:hover { background-color: #28a745; color: white; }
.button-ghost.success:active { background-color: #218838; color: white; }
.button-ghost.info { color: #17a2b8; border-color: #17a2b8; }
.button-ghost.info:hover { background-color: #17a2b8; color: white; }
.button-ghost.info:active { background-color: #138496; color: white; }
.button-ghost.warning { color: #ffda6a; border-color: #ffda6a;}
.button-ghost.warning:hover { background-color: #ffc107; color: #333; }
.button-ghost.warning:active { background-color: #e0a800; color: #333; }
.button-ghost.danger { color: #dc3545; border-color: #dc3545; }
.button-ghost.danger:hover { background-color: #dc3545; color: white; }
.button-ghost.danger:active { background-color: #c82333; color: white; }
.button-ghost.secondary { color: #aeb5bd; border-color: #aeb5bd;}
.button-ghost.secondary:hover { background-color: #6c757d; color: white; }
.button-ghost.secondary:active { background-color: #5a6268; color: white; }Lời kết
Hy vọng bộ code này sẽ giúp bạn dễ dàng tạo ra những nút button đẹp và chuyên nghiệp cho các dự án của mình. Hãy thử nghiệm và sáng tạo để tìm ra những bộ nút button ưng ý nhất!
Nhận xét