[Blogspot] Hiệu ứng button đẹp cho blog #1

Hiệu ứng button này đơn giản mà đẹp, giờ mình share cho các bạn làm đẹp thêm cho blog nhé.

Cách thực hiện: Bước 1: Truy cập quản trị Blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Copy và paste đoạn CSS này lên trước thẻ ]]></b:skin>

html,body{ height:100%; } body{ text-align:center; } body:before{ content:''; height:100%; display:inline-block; vertical-align:middle; } button{ background:#1AAB8A; color:#fff; border:none; position:relative; height:60px; font-size:1.6em; padding:0 2em; cursor:pointer; transition:800ms ease all; outline:none; } button:hover{ background:#fff; color:#1AAB8A; } button:before,button:after{ content:''; position:absolute; top:0; right:0; height:2px; width:0; background: #1AAB8A; transition:400ms ease all; } button:after{ right:inherit; top:inherit; left:0; bottom:0; } button:hover:before,button:hover:after{ width:100%; transition:800ms ease all; }

Bước 3: Lưu template lại.
Cách dùng: Mỗi khi muôn có hiệu ứng button ở đâu thì sử dụng đoạn sau:

<button>Hover me !</button>

Chúc các bạn thành công!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!