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:
- BĐS Bình Minh – Kiến tạo giá trị bền vững
- Những Yếu Tố Chính Quyết Định Điểm SEO Google: Tỷ Lệ Cập Nhật 2024
- Hướng dẫn code function Thêm các tệp CSS và JS vào trang web WordPress
- Hướng dẫn tạo hiệu ứng placeholder typewriter (gõ chữ) cho ô tìm kiếm
- Floors by Nature – Thương hiệu sàn gỗ nội thất Australia
