Vietnext - Hosting và Máy chủ cao cấp

Vietnext chia sẻ cho bạn Nút liên hệ đơn giản đẹp cho WordPress như demo bên dưới:

Live demo: https://medicskin.vn/

Chèn đoạn này vào footer hoặc header:

<div class=”s-medic-cta”>
<a href=”tel:0369258999″ rel=”nofollow”>
<span>0369 258 999</span>
<span><img width=”30″ height=”30″ src=”phone.png” alt=”phone”></span>
</a>
<a rel=”nofollow” target=”_blank” href=”https://www.facebook.com/messages/t/2203423396405720″>
<span>Tư vấn ngay</span>
<span><img width=”30″ height=”30″ src=”chat.png” alt=”Tư vấn ngay” <=”” span=””>
</span></a>
<a href=”#popupmedic” rel=”nofollow”>
<span>Đặt lịch hẹn</span>
<span><img width=”30″ height=”30″ src=”cld.png” alt=”Đặt lịch hẹn” <=”” span=””>
</span></a>
</div>

Đoạn sau vào css custom hoặc nơi nào chứa css bạn muốn:

.s-medic-cta {
font-size: 15px;
z-index: 100;
position: fixed;
right: 10px;
top: 50%;
z-index: 999;
transform: translateY(-50%);
}
.s-medic-cta > a {
position: relative;
padding: 10px 8px 8px 10px;
display: -webkit-box;
transition: 0.5s;
background-color: rgb(240 240 255 / 80%);
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 8.23529px 12.3529px 12.3529px rgb(0 0 0 / 10%);
}
.s-medic-cta > a:hover > span:first-child {
opacity: 1;
width: 155px;
}
.s-medic-cta > a > span:first-child {
color: #2086cf;
font-weight: 700;
padding: 12px 15px;
border-radius: 12px;
opacity: 0;
transition: 0.4s linear;
position: absolute;
width: 0;
right: 0;
top: 0;
white-space: nowrap;
background-color: rgb(240 240 255 / 80%);
}

3 icon mình up phía dưới post này:

Bạn upload & thay link theo ý nhé.

HTML & CSS mình share tại link này: https://jsfiddle.net/tnu50h6d/