Xin chào các bạn hôm nay Tôi Làm Web Dạo sẽ giới thiệu tới các bạn hai hiệu ứng animation hay dùng cho button trên các website. Ngoài ra mình cũng sẽ hướng dẫn các bạn cách để tạo ra các button này .Ok triển thôi !
Hiệu ứng ring ring cho button hotline
Khi truy cập vào một trang website bất kì, bạn sẽ hay thấy các nút gọi được fixed ở góc màn hình. Tùy từng website mà nó sẽ xuất hiện ở bên trái hay bên phải màn hình.
Vậy cách để tạo ra nó như thế nào? . Dưới đây mình sẽ hướng dẫn các bạn cách để tạo ra nút liên hệ với hiệu ứng ring ring như thế nhé.
Bước 1: Code HTML
<div id="button-contact-vr" class="">
<div id="gom-all-in-one"><!-- v3 -->
<div id="phone-vr" class="button-contact">
<div class="phone-vr">
<div class="phone-vr-circle-fill"></div>
<div class="phone-vr-img-circle">
<a href="tel:0982693981">
<img src="/wp-content/phone.png">
</a>
</div>
</div>
</div>
</div>
</div>Bước 2: Code CSS
#button-contact-vr {
position: fixed;
bottom: 0;
z-index: 99999;
}
#button-contact-vr .button-contact {
position: relative;
margin-top: -5px;
}
#button-contact-vr .button-contact .phone-vr {
position: relative;
visibility: visible;
background-color: transparent;
width: 90px;
height: 90px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.phone-vr-circle-fill {
width: 65px;
height: 65px;
top: 12px;
left: 12px;
position: absolute;
box-shadow: 0 0 0 0 #c31d1d;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 50%;
border: 2px solid transparent;
-webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animuiion: zoom 1.3s infinite;
animation: zoom 1.3s infinite;
}
@keyframes zoom{
0% {
transform: scale(.9);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent;
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent;
}
}
.phone-vr-img-circle {
background-color: #e60808;
width: 40px;
height: 40px;
line-height: 40px;
top: 25px;
left: 25px;
position: absolute;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
@keyframes phone-vr-circle-fill{
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
}
.phone-vr-img-circle a {
display: block;
line-height: 37px;
}
.phone-vr-img-circle img {
max-height: 25px;
max-width: 27px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}Các bạn hãy thay đổi lại số điện thoại và link dẫn đến hình ảnh trong đoạn code HTML nhé.
Các bạn có thể xem thêm demo ở đây
Hiệu ứng tada cho button
Hiệu ứng tada này là hiệu ứng mà khi bạn truy cập vào các website dạng landing page sẽ thấy rất nhiều. Nói cách khác thì các landing page rất hay sử dụng các button có hiệu ứng này.
Ok bây giờ chúng ta sẽ xem cách để tạo ra button có hiệu ứng tada này như thế nào nhé.
Bước 1: Code HTML
<a href="/lien-he" class="button_detail button-tada" style="border-radius:25px;">
<span>Nhận tư vấn và báo giá</span>
</a>Bước 2: Code CSS
.button_detail {
color: #fff !important;
text-align: center;
padding: 5px 20px;
min-width: 90px;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-transform: uppercase;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 4;
border-radius: 25px;
background-image: linear-gradient(to right, #f69321 0%, #ffa843 100%);
}
.button-tada {
animation-name: tada;
animation-delay: 1s;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes tada {
0% {
transform: scale(1)
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}Các bạn có thể xem thêm demo ở đây
Lời kết
Như vậy mình đã hướng dẫn các bạn cách code HTML và CSS để tạo ra hai hiệu ứng animation hay dùng cho button, đó là ring ring và tada.
Các bạn có thể thêm nó ở bất kì đâu trên website của mình. Đối với code trong file functions.php, bạn có thể tạo 1 function trong đó chứa HTML và CSS đó, rồi hook vào wp_footer nhé.
Nếu có thắc mắc về code các bạn có thể liên hệ với mình tại đây
Chúc các bạn thành công !
