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

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.

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

Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm