Пример можно увидеть в правом нижнем углу страницы
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="contact-fab"> <div class="fab-children" id="floatingButtons"> <a href="#phone" class="fab-child phone" data-tooltip="Позвонить +7 (000) 000-00-00"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"/></svg> </a> <a href="#telegram" class="fab-child telegram" data-tooltip="Написать в Telegram" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/></svg> </a> <a href="#max" class="fab-child max" data-tooltip="Написать в Max" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" width="512" height="512"> <path fill-rule="evenodd" clip-rule="evenodd" d="M164.0085602,318.8161011 c-31.5135651,0-46.1585617-4.6004944-71.614769-23.002594c-16.1018295,20.7023315-67.0909348,36.8808594-69.3145142,9.2010498 c0-20.7790222-4.6005192-38.337677-9.8144436-57.5065155C7.054132,223.8920135,0,197.5923615,0,159.484726 C0,68.4710846,74.6817856,0,163.1651459,0c88.5600128,0,157.9512177,71.8448029,157.9512177,160.3281403 C321.4136047,247.443161,251.1228333,318.3513794,164.0085602,318.8161011z M165.3120422,78.6689148 c-43.0915375-2.2235794-76.6753464,27.6031265-84.112854,74.3750916 c-6.1340332,38.7210541,4.7538681,85.8764038,14.0315857,88.3300018 c4.4471664,1.0734558,15.6417694-7.9742432,22.6192245-14.9516907 c11.5375748,7.9704437,24.9729691,12.7574768,38.9510727,13.8782349 c44.6499329,2.1477356,82.80159-31.8444214,85.7997131-76.4453125c1.7453156-44.6953049-32.6325836-82.551918-77.2887573-85.109642 L165.3120422,78.6689148z"/> </svg> </a> </div> <div class="fab-main" id="mainButton" data-tooltip="Открыть контакты"> <svg class="envelope-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
/* Основной контейнер */ .contact-fab * { box-sizing: border-box; } .contact-fab { position: fixed; bottom: 20px; right: 20px; z-index: 1000; --button-size: 64px; --icon-size: 28px; } /* Главная кнопка */ .fab-main { width: var(--button-size); height: var(--button-size); border-radius: 50%; background: linear-gradient(135deg, #5f9dd2 0%, #337AB7 100%); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; border: 3px solid white; } .fab-main:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* Подсказка */ .fab-main::before, .fab-child::before { content: attr(data-tooltip); position: absolute; right: calc(var(--button-size) + 10px); background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: white; padding: 8px 15px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); will-change: transform; } .fab-main::after, .fab-child::after { content: ''; position: absolute; right: calc(var(--button-size) + 4px); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #2d3748; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .fab-main:hover::before, .fab-main:hover::after, .fab-child:hover::before, .fab-child:hover::after { opacity: 0.8; } /* Иконка главной кнопки - конверт */ .fab-main svg { width: var(--icon-size); height: var(--icon-size); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); fill: white; position: absolute; } /* Конверт (обычное состояние) */ .fab-main .envelope-icon { opacity: 1; transform: scale(1) rotate(0deg); } /* Крестик (скрыто в обычном состоянии) */ .fab-main .close-icon { opacity: 0; transform: scale(0) rotate(45deg); } /* Анимация при открытии */ .fab-main.active .envelope-icon { opacity: 0; transform: scale(0) rotate(-45deg); } .fab-main.active .close-icon { opacity: 1; transform: scale(1) rotate(0deg); } /* Контейнер дочерних кнопок */ .fab-children { position: absolute; bottom: calc(var(--button-size) + 15px); right: 0; display: flex; flex-direction: column; gap: 15px; opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 1; } .fab-children.active { opacity: 1; pointer-events: all; } /* Дочерние кнопки */ .fab-child { width: var(--button-size); height: var(--button-size); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s; position: relative; border: 3px solid white; transform: translateY(200px) scale(2); text-decoration: none; opacity: 0; } .fab-children.active .fab-child { transform: translateY(0) scale(1); opacity: 1; } /* Просто задержки для всей анимации */ .fab-child:nth-child(1) { --delay: 0.2s; } .fab-child:nth-child(2) { --delay: 0.1s; } .fab-child:nth-child(3) { --delay: 0s; } .fab-children.active .fab-child:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* Иконки дочерних кнопок */ .fab-child svg { width: var(--icon-size); height: var(--icon-size); fill: white; transition: 0.5s; will-change: transform; } .fab-children.active .fab-child:hover svg { transform: scale(1.1); } /* Цвета кнопок */ .fab-child.phone { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); } .fab-child.telegram { background: linear-gradient(135deg, #2CA9DC 0%, #1C7EB6 100%); } .fab-child.max { background: linear-gradient(135deg, #3E5CFC 0%, #8043D9 100%); } /* Адаптивность */ @media (max-width: 768px) { .contact-fab { --button-size: 60px; --icon-size: 24px; bottom: 15px; right: 15px; } .fab-children { bottom: calc(var(--button-size) + 10px); gap: 10px; } } @media (max-width: 480px) { .contact-fab { --button-size: 55px; --icon-size: 22px; bottom: 10px; right: 10px; } .fab-main::before, .fab-child::before { font-size: 13px; padding: 6px 12px; } } |
Переменные:
--button-size- размер кнопок--icon-size- размер иконок
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
document.addEventListener('DOMContentLoaded', function() { const mainButton = document.getElementById('mainButton'); const floatingButtons = document.getElementById('floatingButtons'); let isOpen = false; function toggleButtons() { isOpen = !isOpen; floatingButtons.classList.toggle('active', isOpen); mainButton.classList.toggle('active', isOpen); if (isOpen) { mainButton.setAttribute('data-tooltip', 'Закрыть контакты'); } else { mainButton.setAttribute('data-tooltip', 'Открыть контакты'); } } mainButton.addEventListener('click', function(e) { e.stopPropagation(); toggleButtons(); }); document.addEventListener('click', function(e) { if (isOpen && !e.target.closest('.contact-fab')) { toggleButtons(); } }); document.addEventListener('keydown', function(e) { if (isOpen && e.key === 'Escape') { toggleButtons(); } }); }); |

Шеф, Вы как всегда непревзойдённый магистр всех наилучших моментов сайтостроения!