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:
- Tắt tính năng tự động cập nhật cho các plugin và theme trong WordPress
- Hướng dẫn dùng Rclone sao lưu VPS qua Google Drive, One Drive,…
- Hướng dẫn code function Tạo mật khẩu (password) cho bài viết (post) để xem tiếp
- Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào logo
- Molyci Academy – Viện đào tạo Nail chuyên nghiệp
