» » » » Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover

Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover

Thủ thuật này mình cũng không biết phải miêu tả như thế nào. Đơn giản là hiển thị link khi bạn rê chuột vào một liên kết trong blog, để hiểu rõ hơn thì xem demo ngay tại đây. Rê chuột vào 3 liên kết dưới đây hoặc bất cứ liên kết nào trong blog mình tại bài viết này.
Để thực hiện, các bạn làm như sau.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS dưới vào sau thẻ <body> trong template.
.post-body a::before{
content: attr(href);
float: none;
clear: both;
font-size: 22px;
font-family: "Roboto",sans-serif;
font-weight: 300;
text-transform: none;
padding: 15px 0;
background: #fff;
color: #55579e;
border-radius: 0;
position: fixed;
opacity: 0;
left: 0;
top: 0;
visibility: hidden;
transform: scaleY(0);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
width: 100%;
transition: .3s ease-in-out;
z-index: 999;
margin: 0 auto;
}
.post-body a:hover::before{
opacity:1;
visibility:visible;
transform:scaleY(1)
}
Bước 3: Lưu template.

0 nhận xét trong bài "Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover"

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)