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.