SnippetUI
← Back to snippets

Button Viền Gradient

Thành phần nút này có đường viền chuyển màu xoay đẹp mắt bằng cách kết hợp CSS `-webkit-mask-composite` và chuyển màu động.

HTMLCSS

Xem trước

Nút có nền trong suốt và chỉ có đường viền phát sáng theo mức độ chuyển màu. Triển khai CSS thuần túy không yêu cầu JavaScript.

Trường hợp sử dụng và tính năng

  • Thiết kế sạch: Nền hoàn toàn trong suốt. Nhìn đơn giản mà chỉ có sự chuyển màu của đường viền là nổi bật và không ảnh hưởng đến nội dung.

  • Thích hợp cho các biểu tượng, thanh công cụ và nút phát sáng: Thích hợp cho các nút điều khiển được đặt trên nền tối, chẳng hạn như bản đồ rạp hát.

  • Không cần JavaScript: Đạt được chỉ với animation và mask-composite. Tác động hiệu suất tối thiểu.

  • Dễ dàng mở rộng các biến thể: Bạn có thể dễ dàng tạo các nút với các chủ đề khác nhau chỉ bằng cách thay đổi màu của linear-gradient.

Điểm thiết kế và UX

  1. Cách mask-composite: exclude hoạt động**: Bằng cách đặt padding: 2px trên phần tử giả ::before và che dấu ngược lại hộp nội dung trong khu vực đó, chỉ có thể hiển thị đường viền.

  2. Hướng mắt bằng hoạt ảnh: Chuyển màu xoay trên đường viền để thu hút mắt một cách tự nhiên vào các nút quan trọng.

  3. Tăng tỷ lệ khi di chuột: Thể hiện dự đoán về việc nhấp chuột bằng một thay đổi tinh tế về kích thước transform: scale(1.05).

Cách tùy chỉnh

Bạn có thể tạo các biến thể bằng cách thay đổi màu của linear-gradient:


/* サンセット */

.gb-btn::before {

  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);

}



/* オーlục lam */

.gb-btn::before {

  background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);

}

Để thay đổi độ rộng của đường viền, hãy thay đổi giá trị của padding:


/* 幅を広く (3px) */

.gb-btn::before { padding: 3px; }

.gb-btn::after { inset: 3px; }

Mã triển khai

<button class="gb-btn">Primary</button>

<button class="gb-btn gb-btn-success">Success</button>

<button class="gb-btn gb-btn-warning">Warning</button>



<style>
.gb-btn {

position: relative;

background: transparent;

border: none;

padding: 14px 36px;

font-size: 1rem;

font-weight: 600;

letter-spacing: 0.08em;

cursor: pointer;

border-radius: 8px;

color: white;

z-index: 1;

transition: transform 0.2s ease, box-shadow 0.3s ease;

}

.gb-btn::before {

content: '';

position: absolute;

inset: 0;

padding: 2px;

border-radius: 8px;

background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);

background-size: 400% 400%;

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

animation: gb-rotate 3s ease infinite;

}

.gb-btn::after {

content: '';

position: absolute;

inset: 2px;

border-radius: 6px;

background: rgba(17,24,39,0.9);

z-index: -1;

}

.gb-btn:hover { transform: scale(1.05); }

.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }

@keyframes gb-rotate {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}
</style>

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

|--------|-------|

| Chrome 80+ | ✅ Hoàn toàn tương thích |

| Firefox 99+ | ✅ Hoàn toàn tương thích |

| Safari 15.4+ | ✅ Tương thích |

| Cạnh 80+ | ✅ Hoàn toàn tương thích |

Lưu ý: Safari cũ hơn yêu cầu -webkit-mask-composite: xor. Để dự phòng, bạn có thể sử dụng border: 2px solid trong các trường hợp có thể chấp nhận được.