Приводит кнопку активации промокода в корзине к виду остальных кнопок сайта: цвета, обводка, скругление, эффект при наведении. Заодно отодвигает её от поля ввода — штатно Тильда ставит их вплотную, а настройки кнопок блока на неё не действуют.
Кнопка «Применить» рядом с полем промокода живёт по своим правилам: настройки кнопок в блоке корзины её не касаются, поэтому она остаётся чёрной с белым текстом, без реакции на наведение и вплотную прижатой к полю ввода. Модификация переопределяет её оформление стилями.
Поле промокода Тильда верстает таблицей: кнопке она проставляет display: table-cell. Поэтому расстояние между полем и кнопкой задаётся через border-spacing, а не привычными gap или margin. Таблица разносит и внешние края тоже, поэтому обёртка сдвигается влево и расширяется ровно на удвоенный отступ — иначе поле уехало бы от края корзины.
Отдельно учтено состояние проверки промокода. Пока запрос идёт, Тильда добавляет кнопке класс t-btn_sending, прячет надпись и крутит поверх спиннер. Правило с цветом текста из этой модификации перебивало бы её собственное, и надпись накладывалась бы на спиннер — поэтому в коде есть строка, которая возвращает прозрачность именно на время отправки.
Эффект наведения обёрнут в @media (hover: hover): на тачскринах состояние :hover залипает после нажатия, и кнопка остаётся «наведённой» до касания в другом месте.
После успешной активации Тильда заменяет содержимое обёртки на текст с названием промокода и суммой скидки — поле и кнопка исчезают. Это её штатное поведение, оформлять там уже нечего.
Цвет спиннера, который крутится во время проверки, зашит в стили Тильды (серый с тёмной риской) и настройке не поддаётся. На тёмной кнопке он будет малоконтрастным.
Кнопка сделана обычным div, а не <button>, поэтому с клавиатуры на неё не встать. Это особенность вёрстки Тильды, стилями не исправляется.
Войдите в аккаунт, чтобы увидеть код и настройки этой модификации
Некодим