Cách tạo Button với hiệu ứng di chuột đẹp bằng CSS cho Blogspot

cach tao button voi hieu ung di chuot dep bang css cho blogspot

Hôm nay, mình sẽ giới thiệu tới các bạn một kiểu Button với hiệu ứng di chuột cực chất và đẹp giúp cho trang của bạn trở nên chuyên nghiệp và tạo được sự thu hút đối với người đọc hơn.

Thủ thuật này chỉ sử dụng CSS nên bạn hoàn toàn có thể yên tâm là nó sẽ không làm ảnh hưởng tới tốc độ tải trang của bạn, một điều rất quan trọng đối trong việc giữ người đọc ở lại với trang.

Bạn hãy nhấn vào nút DEMO ở dưới đây để xem thủ thuật này hoạt động như thế nào nhé!

Bây giờ, chúng ta cùng nhau bắt đầu thực hiện nào.

Tạo Button đơn giản với hiệu ứng đẹp

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>.

.effect-button {position:relative; display:block; cursor:pointer; background:#222; color:#fff; font-weight:700; text-align:center; padding: 5px 35px; border:3px solid #069; border-radius:5px; outline:none; overflow:hidden; margin:0 auto}
.effect-button:after {content:""; position:absolute; top:0; left:0; width:150%; height:400%; background:#069; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -webkit-transform:translateX(-98%) translateY(-25%) rotate(45deg); transform:translateX(-98%) translateY(-25%) rotate(45deg)}
.effect-button:hover:after {-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);transform: translateX(-9%) translateY(-25%) rotate(45deg)}
.effect-button span {position:relative; z-index:1}

Bước 3. Nhấn vào nút Lưu chủ đề để hoàn tất.

Bây giờ, bạn chỉ cần chèn đoạn mã HTML hiển thị ở dưới đây vào vị trí mà bạn mong muốn như trang chủ hoặc trong bài viết, trang tĩnh (nhớ là chuyển sang định dạng HTML trước nhé!).

<button class="effect-button"><span>BUTTON</span></button>

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