20 CSS Nút

:root {
/* Bảng màu chính */
--btn-primary: #007bff;
--btn-primary-hover: #0056b3;
--btn-secondary: #6c757d;
--btn-danger: #dc3545;

/* Màu chữ & Nền */
--btn-text-light: #ffffff;
--btn-text-dark: #212529;

/* Cấu hình chung */
--btn-radius: 6px;
--btn-radius-pill: 50px;
--btn-transition: all 0.3s ease-in-out;
}
.btnxd {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--btn-radius);
transition: var(--btn-transition);
background-color: transparent;
}

.btnxd:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Style 1: Solid (Nền đặc) */
.btnxd-solid {
background-color: var(--btn-primary);
color: var(--btn-text-light);
}
.btnxd-solid:hover { background-color: var(--btn-primary-hover); }

/* Style 2: Outline (Viền màu) */
.btnxd-outline {
border-color: var(--btn-primary);
color: var(--btn-primary);
}
.btnxd-outline:hover {
background-color: var(--btn-primary);
color: var(--btn-text-light);
}

/* Style 3: Soft (Nền nhạt trong suốt) */
.btnxd-soft {
background-color: color-mix(in srgb, var(--btn-primary) 15%, transparent);
color: var(--btn-primary);
}
.btnxd-soft:hover {
background-color: var(--btn-primary);
color: var(--btn-text-light);
}

/* Style 4: Gradient (Đổ màu) */
.btnxd-gradient {
background: linear-gradient(45deg, var(--btn-primary), var(--btn-secondary));
color: var(--btn-text-light);
border: none;
}
.btnxd-gradient:hover {
background: linear-gradient(45deg, var(--btn-secondary), var(--btn-primary));
}

/* Style 5: 3D Push (Nút nổi 3D) */
.btnxd-3d {
background-color: var(--btn-primary);
color: var(--btn-text-light);
box-shadow: 0 4px 0 var(--btn-primary-hover);
transform: translateY(0);
}
.btnxd-3d:active {
box-shadow: 0 0 0 var(--btn-primary-hover);
transform: translateY(4px);
}
/* 6. Pill (Bo tròn tuyệt đối ở 2 đầu) */
.btnxd-pill {
border-radius: var(--btn-radius-pill);
}

/* 7. Circle (Nút tròn đều, chuyên dùng bọc Icon) */
.btnxd-circle {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0;
}

/* 8. Neon Glow (Phát sáng) */
.btnxd-glow {
background-color: var(--btn-primary);
color: var(--btn-text-light);
box-shadow: 0 0 10px var(--btn-primary), 0 0 20px var(--btn-primary);
}
.btnxd-glow:hover {
box-shadow: 0 0 20px var(--btn-primary), 0 0 40px var(--btn-primary);
}

/* 9. Neumorphism (Nổi khối Soft UI - Đẹp nhất trên nền web màu xám nhạt #e0e5ec) */
.btnxd-neumorphic {
background-color: #e0e5ec;
color: var(--btn-text-dark);
box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
border: none;
}
.btnxd-neumorphic:active {
box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
}

/* 10. Glassmorphism (Kính mờ trong suốt) */
.btnxd-glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--btn-text-dark);
}
.btnxd-glass:hover {
background: rgba(255, 255, 255, 0.3);
}

/* 11. Slide Right (Hover trượt nền màu từ trái sang phải) */
.btnxd-slide-right {
background: linear-gradient(to right, var(--btn-primary) 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
border: 2px solid var(--btn-primary);
color: var(--btn-primary);
}
.btnxd-slide-right:hover {
background-position: left bottom;
color: var(--btn-text-light);
}

/* 12. Slide Up (Hover trượt nền màu từ dưới lên) */
.btnxd-slide-up {
background: linear-gradient(to top, var(--btn-primary) 50%, transparent 50%);
background-size: 100% 200%;
background-position: top;
border: 2px solid var(--btn-primary);
color: var(--btn-primary);
}
.btnxd-slide-up:hover {
background-position: bottom;
color: var(--btn-text-light);
}

/* 13. Shadow Pop (Đổ bóng khối gắt kiểu Retro/Brutalism) */
.btnxd-shadow-pop {
background-color: var(--btn-text-light);
color: var(--btn-text-dark);
border: 2px solid var(--btn-text-dark);
box-shadow: 4px 4px 0px var(--btn-text-dark);
}
.btnxd-shadow-pop:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px var(--btn-text-dark);
}

/* 14. Ghost (Tàng hình, chỉ hiện nền mờ khi hover) */
.btnxd-ghost {
background-color: transparent;
color: var(--btn-primary);
border: none;
}
.btnxd-ghost:hover {
background-color: color-mix(in srgb, var(--btn-primary) 10%, transparent);
}

/* 15. Lift (Nhấc bổng nút lên khi trỏ chuột) */
.btnxd-lift {
background-color: var(--btn-primary);
color: var(--btn-text-light);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btnxd-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

/* 16. Underline (Chữ gạch chân mở rộng từ giữa) */
.btnxd-underline {
background-color: transparent;
color: var(--btn-text-dark);
position: relative;
border: none;
}
.btnxd-underline::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 5px;
left: 50%;
background-color: var(--btn-primary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.btnxd-underline:hover::after {
width: 80%;
}

/* 17. Border Draw (Vẽ viền chạy quanh nút khi hover) */
.btnxd-border-draw {
background-color: transparent;
color: var(--btn-primary);
border: 2px solid transparent;
position: relative;
}
.btnxd-border-draw::before, .btnxd-border-draw::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 2px solid transparent;
box-sizing: border-box;
}
.btnxd-border-draw::before {
top: 0; left: 0;
}
.btnxd-border-draw::after {
bottom: 0; right: 0;
}
.btnxd-border-draw:hover::before, .btnxd-border-draw:hover::after {
width: 100%;
height: 100%;
}
.btnxd-border-draw:hover::before {
border-top-color: var(--btn-primary);
border-right-color: var(--btn-primary);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.btnxd-border-draw:hover::after {
border-bottom-color: var(--btn-primary);
border-left-color: var(--btn-primary);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}

/* 18. CSS Ripple (Hiệu ứng mặt nước lan tỏa khi click chuột) */
.btnxd-ripple {
background-color: var(--btn-primary);
color: var(--btn-text-light);
position: relative;
overflow: hidden;
}
.btnxd-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
}
.btnxd-ripple:active::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition: 0s;
}

/* 19. Pulse Continuous (Nút đập nhịp tim thu hút sự chú ý - Dùng cho nút Hotline, Sale) */
.btnxd-pulse {
background-color: var(--btn-danger);
color: var(--btn-text-light);
animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* 20. Double Border (Viền kép) */
.btnxd-double {
border: 4px double var(--btn-primary);
color: var(--btn-primary);
background: transparent;
}
.btnxd-double:hover {
background-color: var(--btn-primary);
color: var(--btn-text-light);
}