Back To Top 3D Button

Nút back to top đã không còn xa lạ với hầu hết blogger nhưng hôm nay mình cũng xin design lại button này theo một phong cách riêng của mình với một vài hiệu ứng 3d từ css box-shadow để cộng đồng blogger nha ta có thêm sự lựa chọn.

Đầu tiên bạn vào mục "Mẫu" → "Chỉnh sửa HTML"
1. Về css: chèn đoạn css này phía trên thẻ ]]>

/* Back To Top */
#totop{position:fixed; bottom:20px; right:20px; cursor:pointer; display:none; background:url(https://googledrive.com/host/0B-PN1SIugzO-WE5ZeUo5Y3lRVkU) no-repeat center; width:40px; height:40px; box-shadow:0 0 2px 1px #333; border-radius:50%; transition: background 0.2s}
#totop:hover{box-shadow:0 0 2px 1px #000 inset; background: #fff url(https://googledrive.com/host/0B-PN1SIugzO-WE5ZeUo5Y3lRVkU) no-repeat center;}

Thay đổi giá trị lại cho phù hợp với trang của bạn:

bottom:20px; button cách phía dưới 20px
right:20px; button cách bên phải 20px

2. Chèn thư viện jquery vào phía dưới thẻ ]]>:

Save lại và về trang chủ kiểm tra thành quả.
Nếu có vấn đề gì thì để lại comment bên dưới mình sẽ sớm hồi âm.

Lượt xem: 127

Nguồn:thcsnguyentriphuong-hoavang.edu.vn Copy link