iklan banner
MASIGNCLEAN101

Tạo nút download hiệu ứng tooltip đẹp


tháng 12 10, 2018

Nói qua về tooltip

Chắc hẳn ở đây, hầu hết các bạn đều biết Tooltip là gì rồi đúng không? Nếu không thì mình có thể tóm tắt qua như sau: Tooltip chính là chú thích cho 1 đối tượng bất kì nào đó trong blog/website. Tooltip sẽ hiện lên khi ta rê chuột (hover) vào đối tượng đó hoặc không cần rê chuột cũng được. Tooltip có nội dung là hình ảnh, chữ hoặc đường dẫn ... tùy thuộc vào mục đích sử dụng của bạn.

Tạo nút download hiệu ứng tooltip chuyển động đẹp

Các bước thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Chèn toàn bộ đoạn CSS sau trước
]]></b:skin>

Kiểu 1: Hiện sẵn Tooltip


.download-btn {
 position: relative;
}
.download-btn > a {
    display: inline-block;
    position: relative;
    background-image: linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -webkit-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -moz-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -o-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -ms-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    padding: 8px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 3px; 
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    font-size: 15px;
}
@keyframes toptobot {
 0% {
  top: -20px;
 }
 25% {
  top: -6px;
 }
 50% {
  top: -20px;
 }
 75% {
  top: -6px;
 }
 100% {
  top: -20px;
 }
}
.download-btn > [tooltip] {
    margin: 20px;
    position: relative;
}
.download-btn > [tooltip]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 100;
}
.download-btn > [tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    padding: 7px 5px;
    font-size: 13px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
}
.download-btn > [tooltip]::before, .download-btn > [tooltip]::after {
 animation-name: toptobot;
 animation-iteration-count: infinite;
 animation-duration: 3s;
 -webkit-animation-name: toptobot;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 3s;
 -moz-animation-name: toptobot;
 -moz-animation-iteration-count: infinite;
 -moz-animation-duration: 3s;
 -o-animation-name: toptobot;
 -o-animation-iteration-count: infinite;
 -o-animation-duration: 3s;
 -ms-animation-name: toptobot;
 -ms-animation-iteration-count: infinite;
 -ms-animation-duration: 3s;
}

Kiểu 2: Rê chuột vào mới hiện Tooltip


.download-btn {
 position: relative;
}
.download-btn > a {
    display: inline-block;
    position: relative;
    background-image: linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -webkit-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -moz-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -o-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    background-image: -ms-linear-gradient(90deg,#4caf50 0,#8bc34a 100%);
    padding: 8px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 3px; 
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    font-size: 15px;
}
@keyframes toptobot {
 0% {
  top: -20px;
 }
 25% {
  top: -6px;
 }
 50% {
  top: -20px;
 }
 75% {
  top: -6px;
 }
 100% {
  top: -20px;
 }
}
.download-btn > [tooltip] {
    margin: 20px;
    position: relative;
}
.download-btn > [tooltip]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
}
.download-btn > [tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    padding: 7px 5px;
    font-size: 13px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.download-btn > [tooltip]::before, .download-btn > [tooltip]::after {
 animation-name: toptobot;
 animation-iteration-count: infinite;
 animation-duration: 3s;
 -webkit-animation-name: toptobot;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 3s;
 -moz-animation-name: toptobot;
 -moz-animation-iteration-count: infinite;
 -moz-animation-duration: 3s;
 -o-animation-name: toptobot;
 -o-animation-iteration-count: infinite;
 -o-animation-duration: 3s;
 -ms-animation-name: toptobot;
 -ms-animation-iteration-count: infinite;
 -ms-animation-duration: 3s;
}
.download-btn > [tooltip]::before, .download-btn > [tooltip]::after {
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 
}
.download-btn > [tooltip]:hover::before, .download-btn > [tooltip]:hover::after {
 visibility: visible;
 opacity: 1;
}
Bước 3: Căn chỉnh lại thông số như màu sắc, căn lề (nếu thích) rồi lưu template lại.

Cách chèn nút download vào bài viết

Bạn cứ viết bài như bình thường. Sau đó, nếu cần chèn nút download thì bạn chuyển qua tab HTML và chèn code nút download tại vị trí bạn muốn trong bài viết nhé.
<div style="text-align: center; margin-top: 40px;">
  <div class="download-btn">
   <a href="Link Download" tooltip="15.7GB" rel="nofollow" target="_blank">Download</a>
  </div>
 </div>
Bonus: Bạn có để ý trong code có
tooltip="15.7GB"
không? Bạn hoàn toàn có thể sửa nội dung trong đó bằng cách thay
15.7GB
bằng nội dung bạn thích. Ví dụ như dung lượng thật của file nào đó hay "Click để download" chẳng hạn.

Lời kết

Vậy là mình vừa hướng dẫn các bạn cách để tạo nút download có hiệu ứng tooltip chuyển động cực kì đơn giản và đẹp. Nhất là thủ thuật không dùng bất kì tí Javascript nào nên không cần lo về tốc độ tải trang nhé. Nếu thấy bài viết hay thì hãy chia sẻ cho mình nhé và hi vọng các bạn vẫn luôn ủng hộ blog mình mỗi ngày nha. 
Share This :
Rhokage Rio

Là một nhà thiết kế web thích tìm hiểu những điều mới về blog, mẫu, mã hóa và kinh doanh trực tuyến. Để tìm hiểu những điều mới, đòi hỏi sự kiên nhẫn và thấu đáo trong việc học chúng.

Không có nhận xét nào

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