Tạo button bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot

đã xuất bản
Tạo button bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot. Button bằng CSS, hiệu ứng hover đẹp.
Tạo button bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot

Chèn CSS


button{background:#55579e;border:none;position:relative;transition:800ms ease all;outline:none;font:500 16px "Roboto",sans-serif;text-transform:uppercase}
button a{color:#fff!important;padding:.5em 3em;display:block}
button:hover a{color:#55579e!important;text-decoration:none!important}
button:hover{background:transparent}
button:before,button:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#55579e;transition:900ms ease all}
button:after{right:inherit;top:inherit;left:0;bottom:0}
button:hover:before,button:hover:after{width:100%;transition:800ms ease all}

Cách sử dụng

<button><a href="https://www.bacsiwindows.com/" target"blank">BÁC SĨ WINDOWS</a></button>

Result

15 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. bài ngày xưa đúng không ta ? <3
    Button đẹp

    Trả lờiXóa
  2. E thấy button nào cũng đẹp hết :v

    Trả lờiXóa
  3. admin share có thể bạn quan tâm đi. nhiều ng hóng r

    Trả lờiXóa
    Trả lời
    1. Đó là related pót bình thường thôi mà ?

      Xóa
  4. không chuyển tiếp link được nhé bạn, nhấn vào không mở link chuyển tiếp

    Trả lờiXóa
    Trả lời
    1. Chuyển tiếp link là sao bạn? Đây là button mà?

      Xóa
Gợi ý cho bạn