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

Cũng khá lâu rồi mình chưa viết gì trên blog nhỉ? Tính ra cũng phải nửa tháng rồi. Dạo này mình khá bận nên có khi sắp tới tầm 2 tuần hay gì mới ra được 1 bài thôi. Mong là các bạn vẫn ủng hộ blog mình.

Chẳng là mình đang có dự định di chuyển nhà mới, từ Blogspot qua Wordpress nên đang nghiên cứu vài thứ. Sẵn tiện nay ngồi ngứa tay nên code chơi cho các bạn cái nút download có hiệu ứng tooltip chuyển động lên xuống đơn giản mà chất lượng nhá. Giờ mọi người theo dõi bài viết chi tiết cách làm phía dưới nhé.

Download button with animation tooltip

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

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.

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

.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

.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.