SnippetUI
← Back to snippets

Button Shimmer

Một thành phần nút đẹp mắt phát ra dải ánh sáng (hiệu ứng lung linh) khi di chuột và định kỳ.

HTMLCSSTailwind CSSReact

Đó là một thành phần nút đẹp mắt thu hút ánh nhìn bằng một dải ánh sáng (hiệu ứng lung linh) di chuyển khi di chuột và định kỳ. Lý tưởng cho CTA (Kêu gọi hành động) nơi bạn muốn thu hút sự chú ý của người dùng.

Xem trước

Trường hợp sử dụng & Tính năng

  • Cải thiện tỷ lệ chuyển đổi: Chuyển động trực quan giúp dễ dàng thu hút sự chú ý của người dùng, khiến nó trở nên hoàn hảo cho các lời kêu gọi hành động (CTA) quan trọng như nút đăng ký và mua hàng.

  • Hoạt hình nhỏ: Tạo ấn tượng tinh tế với hiệu ứng lung linh (phản chiếu ánh sáng) định kỳ đều đặn và không quá lòe loẹt.

  • Tương tác vi mô: Nút sẽ được nâng lên một chút khi di chuột và bóng sẽ được thêm vào để nhấn mạnh rằng đó là thành phần có thể nhấp vào.

Những điểm chính của thiết kế và UX (Design & UX)

  • Độ tương phản và khả năng hiển thị: Hiệu ứng được nhấn mạnh bằng cách chạy các dải ánh sáng sáng trên nền tối.

  • Hiệu suất: Hoạt ảnh sử dụng transform và opacity giúp giảm thiểu tải bản vẽ trên trình duyệt và đạt được chuyển động mượt mà.

  • Khả năng truy cập: Vòng lấy nét (focus:ring) đã được đặt thích hợp để có thể truyền đạt trạng thái một cách trực quan ngay cả khi thao tác trên bàn phím.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

  • Thay đổi màu: Bạn có thể tùy chỉnh màu của ánh sáng bằng cách thay đổi rgba(255, 255, 255, 0.2) thành màu thương hiệu của bạn (ví dụ: rgba(59, 130, 246, 0.3)).

  • Điều chỉnh tốc độ hoạt ảnh: Đặt 3s của animation: shimmer-effect 3s infinite; thành 2s sẽ khiến nó di chuyển nhanh hơn và cài đặt 5s sẽ khiến nó di chuyển chậm hơn.

  • Chỉ triển khai với Tailwind: Bằng cách thêm keyframes vào tailwind.config.js, bạn có thể hoàn tất quá trình triển khai chỉ với các lớp tiện ích của Tailwind mà không cần sử dụng các lớp tùy chỉnh.

Mã triển khai (Implementation)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

Phản ứng (Cấu hình Tailwind)

Đây là một phương pháp có thể được hoàn thành trong thành phần React bằng cách mở rộng tệp cấu hình Tailwind (tailwind.config.js).