CSS :hover эффект на кнопке - иконка исчезает, появляется текст с задержкой! Разбор кода построчно
✨ Эффект, который заставит твои иконки ожить! В этом видео я покажу тебе, как сделать стильный и современный 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
