Kiến thức tổng hợp
Tạo hiệu ứng nút Gọi điện – Zalo – Facebook nhấp nháy với JS & CSS cơ bản dễ làm
Đoạn mã JS:
<a href=”tel:0977099696″ title=”Hotline” class=”lamphuc_cta_call”>
<img width=”32″ height=”32″ src=”https://mlqpgeprszak.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://lamphuc.com/wp-content/uploads/2025/03/call.png” alt=”” loading=”lazy”>
</a>
<a href=”zalo.me/0934442323″ title=”Hotline” class=”lamphuc_cta_zalo”>
<img width=”32″ height=”32″ src=”https://mlqpgeprszak.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://lamphuc.com/wp-content/uploads/2025/03/zalo.png” alt=”” loading=”lazy”>
</a>
<a href=”https://www.facebook.com/yentanjsc” title=”Facebook” class=”lamphuc_cta_fb”>
<img width=”32″ height=”32″ src=”https://mlqpgeprszak.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://lamphuc.com/wp-content/uploads/2025/03/fb-icon-128px.png” alt=”” loading=”lazy”>
</a>
Đoạn mã CSS:
a.lamphuc_cta_call {
display: block;
background: #1cb2ed;
position: fixed;
right: 35px;
top: 80%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
padding: 15px;
z-index: 9999;
-webkit-animation: devvn_zoom 1.5s infinite linear;
-moz-animation: devvn_zoom 1.5s infinite linear;
-o-animation: devvn_zoom 1.5s infinite linear;
animation: devvn_zoom 1.5s infinite linear;
box-shadow: 0 0 0 0 #1cb2ed;
}
a.lamphuc_cta_zalo {
display: block;
background: #1cb2ed;
position: fixed;
right: 35px;
top: 70%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
padding: 15px;
z-index: 9999;
-webkit-animation: devvn_zoom 1.5s infinite linear;
-moz-animation: devvn_zoom 1.5s infinite linear;
-o-animation: devvn_zoom 1.5s infinite linear;
animation: devvn_zoom 1.5s infinite linear;
box-shadow: 0 0 0 0 #1cb2ed;
}
a.lamphuc_cta_call img {
width: 32px;
height: 32px;
-webkit-animation: calltrap_spin 3s infinite linear;
-moz-animation: calltrap_spin 3s infinite linear;
-o-animation: calltrap_spin 3s infinite linear;
animation: calltrap_spin 3s infinite linear
}
a.lamphuc_cta_zalo img {
width: 32px;
height: 32px;
-webkit-animation: calltrap_spin 3s infinite linear;
-moz-animation: calltrap_spin 3s infinite linear;
-o-animation: calltrap_spin 3s infinite linear;
animation: calltrap_spin 3s infinite linear
}
a.lamphuc_cta_fb {
display: block;
background: #1cb2ed;
position: fixed;
right: 35px;
top: 60%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
padding: 15px;
z-index: 9999;
-webkit-animation: devvn_zoom 1.5s infinite linear;
-moz-animation: devvn_zoom 1.5s infinite linear;
-o-animation: devvn_zoom 1.5s infinite linear;
animation: devvn_zoom 1.5s infinite linear;
box-shadow: 0 0 0 0 #1cb2ed;
}
a.lamphuc_cta_fb img {
width: 32px;
height: 32px;
-webkit-animation: calltrap_spin 3s infinite linear;
-moz-animation: calltrap_spin 3s infinite linear;
-o-animation: calltrap_spin 3s infinite linear;
animation: calltrap_spin 3s infinite linear
}
@-webkit-keyframes devvn_zoom {
70% {
box-shadow: 0 0 0 15px transparent
}
100% {
box-shadow: 0 0 0 0 transparent
}
}
@keyframes devvn_zoom {
70% {
box-shadow: 0 0 0 15px transparent
}
100% {
box-shadow: 0 0 0 0 transparent
}
}
@-webkit-keyframes calltrap_spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
30% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
33% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
36% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg)
}
39% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
42% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg)
}
45% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
48% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 1
}
51% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
54% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg)
}
57% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@-moz-keyframes calltrap_spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
30% {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
33% {
-moz-transform: rotate(-10deg);
transform: rotate(-10deg)
}
36% {
-moz-transform: rotate(10deg);
transform: rotate(10deg)
}
39% {
-moz-transform: rotate(-10deg);
transform: rotate(-10deg)
}
42% {
-moz-transform: rotate(10deg);
transform: rotate(10deg)
}
45% {
-moz-transform: rotate(-10deg);
transform: rotate(-10deg)
}
48% {
-moz-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 1
}
51% {
-moz-transform: rotate(-10deg);
transform: rotate(-10deg)
}
54% {
-moz-transform: rotate(10deg);
transform: rotate(10deg)
}
57% {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@-o-keyframes calltrap_spin {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
30% {
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
33% {
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
36% {
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
39% {
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
42% {
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
45% {
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
48% {
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 1
}
51% {
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
54% {
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
57% {
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes calltrap_spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
30% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
33% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
36% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
39% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
42% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
45% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
48% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 1
}
51% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg)
}
54% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg)
}
57% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
}
.col.medium-5.small-12.large-5 {
background-color: #183952;
border-radius: 10px;
color: white;
margin-top: 30px;
}
.ff-btn.ff-btn-submit.ff-btn-lg.ff_btn_style.wpf_has_custom_css {
margin-top: 50px;
}
.ff-el-input–label.asterisk-right {
font-size: 22px;
color: white;
font-weight: 700;
}
.ff-el-form-control.text_form {
line-height: 1.8;
}
.ff-default .ff-el-input–label label {
color: white;
}
.ff-el-input–content {
padding: 0px 70px;
}
Bài viết hay? Ấn để tương tác
👍 0❤️ 0👏 0🌟 0
