02
01, 2020
/* =========================
BUTTON FRAME
========================= */
.btn-frame {
display: block;
width: 50px;
height: 50px;
position: fixed;
right: 27px;
z-index: 9999;
cursor: pointer;
}
.btn-frame i {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
z-index: 3;
background: transparent;
}
.btn-frame i img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 4;
}
.btn-frame .animated.infinite {
animation-iteration-count: infinite;
}
.btn-frame .animated {
animation-duration: 1.2s;
animation-fill-mode: both;
}
/* =========================
BORDER
========================= */
.btn-frame .btn-circle {
width: 58px;
height: 58px;
top: -4px;
right: -4px;
position: absolute;
border-radius: 50%;
opacity: .75;
z-index: 1;
}
/* =========================
GLOW EFFECT
========================= */
.btn-frame .btn-circle-fill {
width: 62px;
height: 62px;
top: -6px;
right: -6px;
position: absolute;
border-radius: 50%;
opacity: .35;
animation-name: pulse;
z-index: 0;
}
/* =========================
POSITION
========================= */
.btn-chatbot {
bottom: 215px;
}
.btn-zalo {
bottom: 150px;
}
/* =========================
CHATBOT
========================= */
.btn-chatbot .btn-circle {
border: 1.5px solid rgba(255,122,0,.85);
}
.btn-chatbot .btn-circle-fill {
background: #FF7A00;
}
/* =========================
ZALO
========================= */
.btn-zalo .btn-circle {
border: 1.5px solid rgba(0,104,255,.85);
}
.btn-zalo .btn-circle-fill {
background: #0068FF;
}
/* =========================
TOOLTIP
========================= */
.btn-frame::after {
content: attr(data-tooltip);
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
background: #fff;
color: #444;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
padding: 8px 14px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,.18);
opacity: 0;
visibility: hidden;
transition: all .25s ease;
pointer-events: none;
}
.btn-frame:hover::after {
opacity: 1;
visibility: visible;
}
/* =========================
ANIMATION
========================= */
@keyframes pulse {
0% {
transform: scale(1);
opacity: .35;
}
50% {
transform: scale(1.18);
opacity: .12;
}
100% {
transform: scale(1);
opacity: .35;
}
}
