/* Исходный стиль элемента */ /* Исходные стили для группы кнопки */ .custom-button { display: inline-flex; /* Для выравнивания элементов */ align-items: center; /* Центровка текста и иконки */ justify-content: center; /* Центровка содержимого */ cursor: pointer; /* Указатель "рука" при наведении */ transition: all 0.3s ease; /* Плавный переход для всех элементов */ } /* Исходный стиль прямоугольника */ .custom-button-bg { background-color: #f0f0f0; /* Исходный цвет */ border: 2px solid transparent; /* Без обводки */ padding: 15px 20px; border-radius: 8px; /* Скругление углов */ transition: all 0.3s ease; } /* Исходный стиль текста */ .custom-button-text { color: #333333; /* Исходный цвет текста */ font-size: 16px; margin-right: 10px; /* Отступ между текстом и иконкой */ transition: color 0.3s ease; } /* Исходный стиль иконки */ .custom-button-icon { fill: #333333; /* Исходный цвет иконки (если это SVG) */ transition: fill 0.3s ease; } /* Эффекты при наведении на всю кнопку */ .custom-button:hover .custom-button-bg { border-color: #007bff; /* Обводка прямоугольника */ } .custom-button:hover .custom-button-text { color: #007bff; /* Цвет текста */ } .custom-button:hover .custom-button-icon { fill: #007bff; /* Цвет иконки */ }