Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

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:
    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.
Đánh Giá Bài Viết:
No pain, no gain !

12 nhận xét

  1. quá vip
    1. được của nó luôn
  2. Chất
    1. Chất chơi người dơi chứ
  3. button này chất quá nhìn hoa cả mắt bạn ạ
    1. Cái khung nó chạy nhanh quá à
    2. đúng rồi bro, cho chạy chậm tí là 10đ
    3. tốc độ như này ổn chưa Quang Linh ơi
    4. ok rồi đó bạn ơi, xuất sắc
    5. ok ngay kkk
  4. chóng hết cả mặt =))
    1. Tiền đình kém thế =))
© Phạm Văn Linh. All rights reserved. Developed by Jago Desain
-->