Code nút gọi điện thoại icon rung lắc bằng css

"Đi dạo" một vòng trên internet và tình cờ bạn bắt gặp một website bán hàng có nút gọi điện thoại với hiệu ứng rung lắc thật thú vị, bạn muốn làm một cái nút gọi như vậy nhưng chưa biết cách làm, thế là bạn lên Google tìm với từ khóa "code nút gọi điện thoại" và tìm được post này của tôi.

Xin chúc mừng, nếu đọc hết bài viết này của tôi thì chắc chắn bạn sẽ làm được một nút gọi điện thoại rung lắc giống như người khác đã làm, sẽ không khó mặc dù bạn không rành về code web cho lắm.

Hướng dẫn code nút gọi điện thoại rung lắc bằng css

Viết code nút gọi điện thoại sao cho nó chạy được mà dễ làm?

Nói code cho nó sang vậy thôi chứ bạn chỉ cần copy đoạn mã mà tôi viết ở dưới đây bỏ vào trang web của bạn là chạy được rồi, áp dụng được cho tất cả các loại website kể cả web sử dụng mã nguồn mở như wordpress, blogspost...

Bạn chỉ cần copy đoạn mã dưới đây bỏ vào giữa cặp thẻ <style>...</style> hoặc có thể copy vào 1 file css riêng và dán vào thẻ <header>...</header> trên website của bạn:

+ Code css

.hotline-phone-ring-wrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
}
.hotline-phone-ring {
position: relative;
visibility: visible;
background-color: transparent;
width: 110px;
height: 110px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.hotline-phone-ring-circle {
width: 85px;
height: 85px;
top: 10px;
left: 10px;
position: absolute;
background-color: transparent;
border-radius: 100%;
border: 2px solid #e60808;
-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
width: 55px;
height: 55px;
top: 25px;
left: 25px;
position: absolute;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
background-color: #e60808;
width: 33px;
height: 33px;
top: 37px;
left: 37px;
position: absolute;
background-size: 20px;
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
width: 20px;
height: 20px;
}
.hotline-bar {
position: absolute;
background: rgb(49, 74, 166);
border-radius: 3px;
padding: 0 15px 0 0;
background-size: 100%;
cursor: pointer;
transition: all 0.8s;
-webkit-transition: all 0.8s;
z-index: 9;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px !important;
/* width: 175px !important; */
left: 33px;
bottom: 37px;
}
.hotline-bar > a {
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-indent: 50px;
display: block;
letter-spacing: 1px;
line-height: 40px;
font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
-webkit-opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
-webkit-opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
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);
}
}

+ Code HTML chèn trong cặp thẻ <body>...</body>:

Giải thích code nút gọi điện thoại một chút:

.hotline-phone-ring-wrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
}

Đoạn code này sẽ định nghĩa vị trí nút gọi của bạn, position:fixed giúp cố định nút gọi của bạn ở một vị trí, như ở ví dụ này thì nó sẽ nằm ở góc bên trái phía dưới của trang web, khi kéo chuột lên xuống nó sẽ chạy dọc theo màn hình của các bạn.

@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
-webkit-opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
-webkit-opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
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);
}
}

Đoạn này khai báo keyframes và ta thấy là có 3 keyframes tương ứng cho 3 class khác nhau phải không, đây chính là cách mà css giúp chúng ta cho một class nào đó chuyển động theo ý muốn, hay còn gọi là animation.

>> Bạn có thể xem thêm các ví dụ về chuyển động animation ngay tại đây: click vào xem

Ngoài ra các bạn có thể để ý nó có 3 class lớn là class chứa icon điện thoại, class chứa vòng tròn nhỏ và class chứa vòng tròn lớn. Các bạn có thể kiểm tra phần tử bằng cách bấm F12, sau đó sẽ chỉnh lại size hoặc màu sắc mà mình mong muốn.

Các bạn có thể nhìn rõ demo trực quan tại website www.web7b.com của mình ở trên thanh menu góc phải trên cùng, nhìn thích mà cực dễ làm phải không?

Nếu cần hỗ trợ xin vui lòng inbox vào hộp thư Facebook của tôi tại địa chỉ: https://www.facebook.com/websitetocdo/

Xin cám ơn đã đọc bài viêt!