Tạo nút gọi rung lắc cho website

tạo nút gọi rung lắc cho website

Chào các bạn,

lâu rồi mới chia sẽ lại, nay mình chia sẽ đoạn code css ngắn để giúp mọi người tiết kiệm thời gian làm website hơn tí nhé.
Yêu cầu có Font Awesome nhé, còn không các bạn chịu khó thay đoạn fa fa-mobile bằng link hình ảnh nhé.


<div class="fixed call-button left">
<a href="tel:0974678816">
<span class="pulse-button">
<i class="fa fa-mobile" aria-hidden="true"></i>
</span>
</a>
<div class="text-phone pull-left">
<a href="tel:0974678816">
<p>Hotline: 0974678816</p>
</a>
</div>
</div>

 

 

Less CSS ở đây nhé.


@color_1: white;
@color_2: #edbf05;
@background_color_1: #373737;

/* call button */
@keyframes pulse {
0% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
.call-button.left {
right: auto;
left: 50px;
}
.call-button {
right: 50px;
bottom: 10px;
height: 60px;
width: 60px;
transition: all .5s;
a {
display: inline-block;
height: 60px;
width: 60px;
float: right;
}
.fa {
font-size: 40px;
line-height: 60px;
}
.text-phone {
width: 0px;
height: 60px;
transition: all .2s;
overflow: hidden;
a {
font-size: 18px;
line-height: 60px;
width: 100%;
font-weight: bold;
color: @color_2;
text-align: center;
text-decoration: none;
}
}
&:hover {
width: 300px;
background-color: @background_color_1;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
.text-phone {
width: calc(100% - 60px);
}
.pulse-button {
-webkit-animation: none;
border-radius: 0px;
background: #edbf05;
}
}
}
.pulse-button {
position: relative;
display: block;
width: 60px;
height: 60px;
font-size: 1.3em;
font-weight: light;
text-transform: uppercase;
text-align: center;
line-height: 60px;
letter-spacing: -1px;
color: @color_1;
border: none;
border-radius: 50%;
background: #0b52d0;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(60, 188, 141, 0.5);
-webkit-animation: pulse 1.5s infinite;
transition: all .5s;
}

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *