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 cho phép thực thi mã PHP trong nội dung của widget văn bản (Text Widget) trong WordPress
- JPT Media – Sáng tạo, chất lượng, tận tâm
- Hướng dẫn Thêm các liên kết DEMO hoặc chức năng bổ sung trên sản phẩm WooCommerce
- Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào banner
- BĐS Bách Niên Gia – Đắp xây niềm tin – Khơi nguồn thịnh vượng
