Tạo Button Với Hiệu Ứng Phản Chiếu Và Phát Sáng Cực Đẹp!

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: Ngô Vi Minh Hiếu

  <center>
    <but onclick="window.open("https://www.phamvanlinh.gq/?m=1")" target="blank">
      <span></span>
      <span></span> 
      <span></span>
      <span></span>
      Ngô Vi Minh Hiếu
    </but>
  </center>

• Màu xanh lá: Ngô Vi Minh Hiếu

  <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>
      Ngô Vi Minh Hiếu
    </but>
  </center>

• Màu hồng Ngô Vi Minh Hiếu

  <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>
      Ngô Vi Minh Hiếu
    </but>
  </center>

• Màu cam: Ngô Vi Minh Hiếu

  <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>
      Ngô Vi Minh Hiếu
    </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.

Đọc thêm: