CSS :hover эффект на кнопке - иконка исчезает, появляется текст с задержкой! Разбор кода построчно
Автор: SERGDEV
Загружено: 2025-07-07
Просмотров: 95
Описание:
✨ Эффект, который заставит твои иконки ожить!
В этом видео я покажу тебе, как сделать стильный и современный CSS hover-эффект: при наведении курсора иконка плавно исчезает, а вместо неё появляется текст с красивым градиентом с задержкой.
Чистый HTML + CSS и немного магии JavaScript 🧙♂️
🔧 Подойдёт для лендингов, карточек соцсетей, футеров и любого интерфейса, где нужна интерактивность.
Также разберём, как адаптировать ширину под длинный текст, и покажу решение через JavaScript с динамическим вычислением.
🔔 Подписаться на канал ⬇️
/ @sergdev
👍 Поддержи меня на PATREON, я буду благодарен.
Архив с кодом тут:
https://www.patreon.com/posts/effekt-...
Таймкоды видео:
00:00 О чем видео
00:23 Верстаем HTML
01:47 Пишем современный CSS
04:17 Переменные inline в html
04:49 Анимация ссылок
05:17 Позиционирование текста и иконки
06:48 Я заметил проблему
07:22 Логика JS
08:22 Результат наших действий
08:46 Благодарю за просмотр
#CSS2025 #has #CSSбезJS #ВебРазработка #Frontend #НовинкиCSS #разработка #cssanimation, #css3d , CSS hover effect, CSS before after, CSS transform tutorial, rotate skew translate, CSS псевдоэлементы, HTML CSS кнопки, CSS плитки, социальные кнопки, CSS эффекты, CSS уроки, css animation, UI дизайн css
Повторяем попытку...

Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: