Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào button
Dán CSS sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.button { position: relative; display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; overflow: hidden; /* Ẩn phần dư của hiệu ứng */ text-transform: uppercase; } .button:hover { background: #0056b3; } .button::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-25deg); } .button:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { left: 150%; } } |
🔥 Khi di chuột vào button, hiệu ứng ánh sáng quét ngang qua tạo cảm giác chuyên nghiệp!
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- Hướng dẫn thêm nút hữu ích vào bài viết
- Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào hình ảnh
- Thế giới BĐS Miền Bắc – Vươn tầm cao – Vượt tầm xa
- Hướng dẫn code Function trang Kiểm tra Whois domain (tên miền) tại nhiều nhà đăng ký
- Hướng Dẫn Lưu Thông Tin Liên Hệ, Tin Nhắn Từ Contact Form 7 (CF7) Vào Database WordPress
