Анимация при взаимодействии (псевдоклассы)
Привет, друзья! На связи Настя Соло.
Главная задача любой анимации в веб-интерфейсе — дать пользователю обратную связь. Человек должен сразу считывать, куда можно нажать и сработал ли его клик.
Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки.
Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным.
В CSS за этот диалог с пользователем отвечают псевдоклассы. Это специальные команды, которые меняют внешний вид элемента в момент, когда мы что-то с ним делаем:
:hover — срабатывает при наведении курсора мыши.
:active — дает отклик в долю секунды самого нажатия (создает физическое ощущение реального щелчка).
transition — команда плавности. Без нее элементы будут меняться резко и дёргано. Она задает время анимации, чтобы эффект выглядел мягко и профессионально.
При наведении мы можем делать с элементом вообще всё что угодно! Например: залить другим цветом, добавить яркую рамку, изменить цвет текста, наложить тень или скруглить углы.
Давайте сделаем кнопку прямо сейчас. Я подготовила код, в котором мы зададим стартовый вид кнопки, а при наведении кардинально её поменяем.
CSS
.f-btn.btn, .xdget-button {
background: #ff8a00!important; /* задаем стартовый оранжевый цвет кнопки */
border: 2px solid transparent!important; /* делаем невидимую рамку */
color: #ffffff!important; /* делаем текст белым */
border-radius: 6px!important; /* немного скругляем углы */
transition: 0.4s; /* задаем плавность всех изменений */
}
.f-btn.btn:hover, .xdget-button:hover {
background: #ffffff!important; /* при наведении фон становится белым */
border: 2px solid #ff8a00!important; /* появляется оранжевая рамка */
color: #ff8a00!important; /* текст становится оранжевым */
transform: scale(1.05); /* кнопка плавно увеличивается */
}
.f-btn.btn:active, .xdget-button:active {
transform: scale(0.95); /* при клике кнопка проваливается, имитируя нажатие */
}
Куда вставить этот код на Геткурс?
Чтобы ответить на этот вопрос, нужно понимать, что на платформе существует два разных конструктора:
Новый конструктор — это лендинги и уроки внутри.
Старый конструктор — это системные страницы и страница входа, обратной связи, личный кабинет, список тренингов, список уроков и открытый профиль.
Именно поэтому в нашем коде мы использовали сразу два обращения, чтобы магия применилась вообще ко всем вариантам кнопок:
.f-btn.btn — сработает для кнопок в новом конструкторе, а также для системных кнопок, которые изначально свёрстаны самим Геткурсом в старом конструкторе.
.xdget-button — сработает специально для блока «Кнопка», который мы можем вручную добавить в старом конструкторе (через меню «Добавить блок»).
Если вы меняете кнопки в НОВОМ конструкторе (на лендингах или внутри уроков):
— Для всех кнопок на странице / в уроке: добавьте стандартный блок CSS из меню блоков и вставьте туда код целиком.
— Для кнопок только в одном конкретном блоке: нажмите кнопку «Стиль» и перейдите в подробные настройки. В поле CSS вставьте этот же самый код.
Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов):
Нажмите кнопку «Действия» в правом верхнем углу «Настроить вид» и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на этой странице.
Если вы не хотите, чтобы в старом конструкторе окрашивались системные кнопки, просто уберите из кода часть .f-btn.btn вместе с запятой. Оставьте только классы .xdget-button (и их версии для наведения и клика).
Сохраняйте пост, чтобы шпаргалка всегда была под рукой!
И не жалейте лайков, если было полезно
25