BUTTON VỚI HIỆU ỨNG PHẢN CHIẾU VÀ PHÁT SÁNG
N ếu như bạn đã quá chán với những kiểu button tĩnh. Bạn muốn một thứ gì đó khác biệt. Bạn thích những ánh đèn này lấp lánh, khói mờ nhân ảnh... Ơ mà hình như lạc đề mất rồi, quay trở lại với chủ đề chính thì hôm nay mình sẽ chia sẻ cho các bạn một vài mẫu button với ánh đèn lấp lánh, quả này mà kết hợp với dark mode thì beautiful luôn.
 |
| Tạo Button Với Hiệu Ứng Phản Chiếu Và Phát Sáng Cực Đẹp! |
HƯỚNG DẪN
CSS:
Vẫn là coppy đoạn css đưới đây chỉnh sửa màu mè tùy ý các bạn và dán vào trước thẻ </body>
<style type="text/css">
but{position:relative;display:inline-block;padding:10px 10px;margin:40px;color:#03e9f4;text-decoration:none;text-transform:uppercase;transition:0.5s;letter-spacing:4px;overflow:hidden}but:hover{background:#03e9f4;color:#050801;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect:below 1px linear-gradient(transparent,#0005)}but span{position:absolute;display:block}but span:nth-child(1){top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03e9f4);animation:animate1 1.6s linear infinite}@keyframes animate1{0%{left:-100%}50%,100%{left:100%}}but span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03e9f4);animation:animate2 1.6s linear infinite;animation-delay:0.40s}@keyframes animate2{0%{top:-100%}50%,100%{top:100%}}but span:nth-child(3){bottom:0;right:0;width:100%;height:2px;background:linear-gradient(270deg,transparent,#03e9f4);animation:animate3 1.6s linear infinite;animation-delay:0.80s}@keyframes animate3{0%{right:-100%}50%,100%{right:100%}}but span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#03e9f4);animation:animate4 1.6s linear infinite;animation-delay:1.20s}@keyframes animate4{0%{bottom:-100%}50%,100%{bottom:100%}}
</style>
DEMO VÀ CODE MẪU:
Dưới đây là demo và code mẫu một số màu cho các bạn, các bạn cũng có thể thay đổi màu theo ý của mình nhé! Coppy các đoạn code dưới đây chỉnh sửa đường link và chữ hiển thị sau đó dán vào nơi bạn muốn đặt button, vậy là xong.
- Màu xanh dương:
Phạm Văn Linh <center>
<but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Phạm Văn Linh
</but>
</center> - Màu xanh lá:
Phạm Văn Linh <center>
<but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" style="filter: hue-rotate(270deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Phạm Văn Linh
</but>
</center> - Màu hồng
Phạm Văn Linh <center>
<but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" style="filter: hue-rotate(110deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Phạm Văn Linh
</but>
</center> - Màu cam:
Phạm Văn Linh <center>
<but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" style="filter: hue-rotate(190deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Phạm Văn Linh
</but>
</center>
LỜI KẾT
Và đó và đó và đó là một vài chiếc button mình muốn chia sẻ cho các bạn. Nếu thấy đẹp thấy hay thì tiếc gì mà không để lại cho mình một bình luận ở dưới nhỉ, cảm ơn các bạn rất nhiều.
Thông báo !:
=========
Mình cần bán web và app này. Mọi người cần liên hệ nhé
=========
Nháy đúp liên tục nút [‣] để phát video
Liên hệ QUẢNG CÁO, góp ý, báo lỗi ➤ Tại Đây
=========
Các bạn đang xem truyền hình trực tuyến trên tại ứng dụng TiVi 5G - Trang Xem Tivi online tốt nhất, ổn định nhất, đáp ứng nhiều người truy cập cùng lúc. Xem Tạo Button Với Hiệu Ứng Phản Chiếu Và Phát Sáng Cực Đẹp! - Tivi Online Tạo Button Với Hiệu Ứng Phản Chiếu Và Phát Sáng Cực Đẹp! - Xem Tạo Button Với Hiệu Ứng Phản Chiếu Và Phát Sáng Cực Đẹp! Chất Lượng Cao.
