Иконки на кнопках

Иконки на кнопках

Модификация позволяет создать свои иконки для кнопок в Zero-блоке.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
27806331
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём кнопку в Zero-блоке и задаём ей свой класс. К примеру vk-button
Шаг 1
Создаём блок T123 и помещаем в него код (код поместить в конце страницы)
Шаг 2
<!--Иконки на кнопках-->
<!--https://mt-webdesign.ru/buttons-icon-->
<!--Перечисляем классы своих кнопок через запятую .button-1,.button-2 и т.д-->
<!--Иконка слева от текста-->
<script>
$('.icon-button,.icon-button').addClass("button-icon-left");
</script>
<!--Иконка справа от текста-->
<script>
$('.icon-button,.icon-button').addClass("button-icon-right");
</script>
<style>
:root {
/*Настройки иконок*/
--IconWidth: 31px; /*Ширина иконки*/
--IconHeight: 31px; /*Высота иконки*/
--MarginRight: 10px; /*Отступ справа от иконки до текста (иконка находится слева)*/
--MarginLeft: 10px; /*Отступ слева от иконки до текста (иконка находится справа)*/
--IconDuration: 0.2s; /*Продолжительность анимации иконки, при наведении на кнопку (выставить значение такое же, что и у самой кнопки, при наведении на неё)*/
--IconTransformRight: 0px; /*Сдвиг иконки вправо, при наведении (иконка находится справа)*/
--IconTransformLeft: 0px; /*Сдвиг иконки вправо, при наведении (иконка находится слева)*/
}
</style>
<!--Ниже не трогаем-->
<style>
.button-icon-left .tn-atom {
transition-duration: var(--IconDuration);
}
.button-icon-right .tn-atom {
transition-duration: var(--IconDuration);
}
.button-icon-left .tn-atom:before {
content: '';
width: var(--IconWidth);
height: var(--IconHeight);
margin-right: var(--MarginRight);
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
transition-duration: var(--IconDuration);
}
.button-icon-right .tn-atom:after {
content: '';
width: var(--IconWidth);
height: var(--IconHeight);
margin-left: var(--MarginLeft);
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
transition-duration: var(--IconDuration);
}
</style>
Еще ниже добавляем код в блок T123 под контентом (если нужны иконки слева от текста)
Шаг 3
<!--Иконка слева от текста-->
<style>
/*Иконка в пасивном состоянии*/
.icon-button .tn-atom:before {
left: 0;
transition-duration: var(--IconDuration);
background-image: url(url);
}
/*Иконка в активном состоянии*/
.icon-button .tn-atom:hover:before {
transition-duration: var(--IconDuration);
left: var(--IconTransformLeft);
background-image: url(url);
}
</style>
Еще ниже добавляем код в блок T123 под контентом (если нужны иконки справа от текста)
Шаг 4
<!--Иконка справа от текста-->
<style>
/*Иконка в пасивном состоянии*/
.icon-button .tn-atom:after {
left: 0;
transition-duration: var(--IconDuration);
background-image: url(url);
}
/*Иконка в активном состоянии*/
.icon-button .tn-atom:hover:after {
transition-duration: var(--IconDuration);
left: var(--IconTransformRight);
background-image: url(url);
}
</style>
Переходим в код под шагом 2 и меняем класс .icon-button на свой, к примеру .vk-button
Шаг 5
Переходим в код под шагом 3 и меняем класс .icon-button на свой, к примеру .vk-button
Шаг 6
Загружаем иконку, через блок IM01 и копируем её url-путь к картинке
Шаг 7
Возвращаемся в код из 3 шага и указываем свой путь к иконке. Тоже самое проделываем и со второй иконкой, при наведении
Шаг 8
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda