“Đ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.
Đang xem: Icon điện thoại trong html
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.
Xem thêm: kem dưỡng da dành cho da nhờn
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…
Xem thêm: Cách Nhận Tướng Miễn Phí Trong Liên Quân Mobile, Nhận Tướng Miễn Phí Chỉ Với 3 Bước Dễ Dàng
Bạn chỉ cần copy đoạn mã dưới đây bỏ vào giữa cặp thẻ hoặc có thể copy vào 1 file css riêng và dán vào thẻ … 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); }}
