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: www.insurancefinances.com

<center>
  <but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    www.insurancefinances.com
  </but>
</center>

Màu xanh lá: www.insurancefinances.com

<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>
    www.insurancefinances.com
  </but>
</center>

Màu hồng www.insurancefinances.com

<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>
    www.insurancefinances.com
  </but>
</center>

Màu cam: www.insurancefinances.com

<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>
    www.insurancefinances.com
  </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.