/ Адаптивность / Кнопка с мессенджерами

Кнопка с мессенджерами

HIT

Кнопка отрывающая несколько мессенджеров, с возможностью перехода в них.

Стили:

.ml_wrapper {
    position: fixed;
    bottom: 150px;
    right: 75px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}	
	
.ml_bgimg {
    background-image: url(/wp-content/uploads/2022/08/chat.png);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.2s linear;
}
	
.ml_btn_label {
    position: relative;
    cursor: pointer;
    z-index: 2;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    background: #1ac139;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
    overflow: hidden;
}	
	
.ml_btn_input {display: none;}
	
.ml_icon_link {
    border-radius: 50%;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
    opacity: 0;
    visibility: hidden;
    width: 50px;
    height: 50px;
}	
	
.ml_btn_input:checked~.ml_icon_link {
    opacity: 1;
    visibility: visible;
}		
	
.ml_btn_input:checked~a:nth-of-type(1) {
    transition: all 0.2s ease-in-out;
    transform: translate(0,-135%);
}
	
.ml_btn_input:checked~a:nth-of-type(2) {
    transition: all 0.225s ease-in-out;
    transform: translate(0,-255%);
}
	
.ml_btn_input:checked~a:nth-of-type(3) {
    transition: all 0.25s ease-in-out;
    transform: translate(0,-375%);
}
	
.ml_tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #fff;
    padding: 6px 9px;
    font-size: 13px;
    border-radius: 3px;
    transform: translateX(0%) translateY(-50%);
    top: 50%;
    background: #292929;
    color: #fff;
    opacity: 0;
    transition: all 0.1s linear;
}	
	
.ml_btn_input:checked+label .ml_icon-close {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.ml_icon-close {
    opacity: 0;
    visibility: hidden;
    transform: scale(.1);
}
.ml_icon {
    transition: all 0.3s ease-in-out;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}	
.ml_btn_input:checked+label {background: #fff!important; animation: none;}	
	
	
.ml_icon_link:hover .ml_tooltip {opacity: .85;}

.ml_tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #fff;
    padding: 6px 9px;
    font-size: 13px;
    border-radius: 3px;
    transform: translateX(0%) translateY(-50%);
    top: 50%;
    background: #292929;
    color: #fff;
    opacity: 0;
    transition: all 0.1s linear;
}	

@media (max-width:1024px) { .ml_wrapper {bottom: 200px; right: 24px;} }
@media (max-width:480px) { .ml_wrapper {bottom: 140px;} }

Верстка:

<div class="ml_wrapper"> 
<input type="checkbox" class="ml_btn_input" id="ml_btn_input"> <label for="ml_btn_input" class="ml_btn_label">
	
<div class="ml_bgimg"></div>
	
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="ml_icon ml_icon-close" viewBox="0 0 23 23"> <g fillrule="evenodd"> <path d="M10.314 -3.686H12.314V26.314H10.314z" transform="rotate(-45 11.314 11.314)"></path> <path d="M10.314 -3.686H12.314V26.314H10.314z" transform="rotate(45 11.314 11.314)"></path> </g> </svg> </label>

<a class="ml_icon ml_icon_link" href="https://telegram.im/@identify" target="_blank" rel="nofollow noopener noreferrer">
<span class="ml_tooltip">Telegram</span>
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z" fill="#0087D0"></path><path d="M36.11 13.0399L9.40999 22.7999C8.86999 22.9999 8.85999 23.7999 9.38999 24.0299L16.23 26.7199L18.78 34.4099C18.93 34.8199 19.47 34.9599 19.81 34.6799L23.73 31.1899L31.17 35.9099C31.55 36.1499 32.06 35.9399 32.15 35.5099L36.99 13.7599C37.09 13.2799 36.59 12.8699 36.11 13.0599V13.0399ZM20.03 28.1599L19.6 32.1199L17.53 26.0299L32.1 16.8699L20.03 28.1699V28.1599Z" fill="white"></path></svg> </a>
	
<a class="ml_icon ml_icon_link" href="https://wa.me/79998887766" target="_blank" rel="nofollow noopener noreferrer">
<span class="ml_tooltip"> WhatsApp</span> 
<svg width="50" height="50" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M25 50a25 25 0 100-50 25 25 0 000 50z" fill="#fff"></path> <path d="M26.1 12a12.1 12.1 0 00-10.25 18.53l.29.46-1.22 4.46 4.57-1.2.45.27a12.1 12.1 0 106.16-22.51V12zm6.79 17.22c-.3.85-1.72 1.62-2.41 1.72-.62.1-1.4.14-2.25-.14-.7-.22-1.37-.47-2.03-.77-3.59-1.57-5.93-5.24-6.1-5.48-.19-.24-1.47-1.97-1.47-3.76 0-1.79.93-2.67 1.25-3.03.33-.37.72-.46.96-.46.23 0 .47 0 .68.02.22 0 .52-.09.8.62l1.1 2.7c.1.18.16.4.04.64s-.18.39-.36.6c-.18.21-.38.47-.54.64-.18.18-.36.38-.15.74.2.36.92 1.55 1.98 2.52 1.37 1.23 2.52 1.62 2.88 1.8.35.18.56.15.77-.1.2-.23.9-1.05 1.13-1.42.24-.36.48-.3.8-.18.33.12 2.09 1 2.44 1.18.36.19.6.28.69.43.09.15.09.88-.21 1.73z" fill="#27D061"></path> <path d="M25 0a25 25 0 100 50 25 25 0 000-50zm1.03 38.37c-2.42 0-4.8-.6-6.9-1.76l-7.67 2 2.05-7.45a14.3 14.3 0 01-1.93-7.2c0-7.92 6.49-14.38 14.45-14.38a14.4 14.4 0 110 28.79z" fill="#27D061"></path> </svg> </a> 

<a class="ml_icon ml_icon_link" href="viber://chat?number=%2B79998887766" target="_blank" rel="nofollow noopener noreferrer">
<span class="ml_tooltip"> Viber</span>
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 43C34.9411 43 43 34.9411 43 25C43 15.0589 34.9411 7 25 7C15.0589 7 7 15.0589 7 25C7 34.9411 15.0589 43 25 43Z" fill="white"></path><path d="M25 0C11.194 0 0 11.194 0 25C0 38.806 11.194 50 25 50C38.806 50 50 38.806 50 25C50 11.194 38.806 0 25 0ZM24.063 12.977C24.247 12.973 24.439 13.002 24.604 13.002C24.671 13.002 24.734 12.996 24.787 12.982C30.735 13.198 35.924 18.605 35.817 24.552C35.817 25.092 36.033 25.958 35.167 25.958C34.302 25.958 34.519 25.093 34.519 24.444C34.4326 23.7048 34.3034 22.9712 34.132 22.247C33.9787 21.5995 33.7772 20.9644 33.529 20.347C33.1967 19.5117 32.7468 18.7281 32.193 18.02C30.586 15.991 28.146 14.827 24.679 14.28C24.139 14.173 23.381 14.28 23.381 13.632C23.381 13.069 23.705 12.977 24.063 12.977V12.977ZM32.248 24.768C31.275 24.877 31.49 24.011 31.383 23.471C30.733 19.686 29.436 18.281 25.544 17.415C25.004 17.307 24.139 17.415 24.246 16.551C24.355 15.686 25.219 16.011 25.761 16.119C29.653 16.551 32.789 19.794 32.789 23.471C32.681 23.903 33.005 24.661 32.249 24.769L32.248 24.768ZM29.869 22.823C29.869 23.255 29.869 23.795 29.22 23.903C28.788 23.903 28.571 23.579 28.463 23.147C28.355 21.525 27.489 20.66 25.868 20.443C25.436 20.335 24.895 20.227 25.11 19.577C25.22 19.145 25.65 19.145 26.085 19.145C27.923 19.038 29.869 20.984 29.869 22.823ZM35.924 34.718C35.275 36.556 33.004 38.394 31.058 38.394C30.842 38.286 30.301 38.286 29.761 38.069C21.327 34.393 15.055 28.445 11.594 19.795C10.404 16.983 11.702 14.497 14.623 13.523C14.8797 13.4163 15.155 13.3613 15.433 13.3613C15.711 13.3613 15.9863 13.4163 16.243 13.523C17.542 13.956 20.677 18.39 20.786 19.687C20.893 20.767 20.136 21.308 19.488 21.741C18.19 22.607 18.19 23.796 18.731 24.985C20.029 27.797 22.191 29.635 24.894 30.933C25.868 31.365 26.841 31.365 27.49 30.283C28.679 28.445 30.193 28.445 31.815 29.635C32.572 30.175 33.436 30.716 34.193 31.365C35.276 32.23 36.573 32.986 35.924 34.717V34.718Z" fill="#935BBE"></path></svg> </a> 
</div>

В качестве изначальной иконки (путь должен быть прописан в классе .ml_bgimg) можно использовать эти:

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Кнопка с мессенджерами Кнопка с мессенджерами Кнопка с мессенджерами Кнопка с мессенджерами
Видео на сайте
Рекомендации для васВидео на сайтеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.