Как сделать анимированную кнопку на CSS | Эффект блика (Shine Effect)

🔗 Исходный код (source code): https://www.patreon.com/posts/153355997 В этом видео мы пошагово создадим стильную анимированную кнопку с эффектом пробегающего блика (Shine Effect), используя только чистый HTML и CSS без использования JavaScript. Мы разберем, как с помощью линейного градиента и манипуляций с фоном (background-size и background-position) создать иллюзию светового луча, который бесконечно перемещается по поверхности кнопки. Также мы добавим интерактивные эффекты при наведении и нажатии, такие как мягкие тени и легкое смещение, чтобы кнопка выглядела живой и отзывчивой. 🕒 Тайм-коды: 00:00:00 - Демонстрация готовой кнопки с эффектом бесконечного блика 00:00:30 - Написание HTML разметки: создание кнопки с классом Shine Button 00:01:15 - Настройка CSS переменных (Root) для управления цветами и границами 00:02:25 - Базовая стилизация кнопки: отступы, шрифты и скругление углов 00:03:45 - Создание эффекта блика с помощью Linear Gradient под углом 110 градусов 00:05:00 - Секрет анимации: расширение фона через background-size до 400% 00:05:45 - Настройка плавных переходов (Transition) для теней и трансформаций 00:06:35 - Добавление эффекта Hover: подъем кнопки и появление динамической тени 00:07:45 - Стилизация состояния Active: имитация нажатия на кнопку 00:08:15 - Написание анимации Keyframes: запуск движения блика по оси X 00:09:05 - Финальный обзор результата и советы по настройке скорости анимации 💡 Технические приемы из видео: ✅ Linear Gradient - создание светового пятна в центре основного фона кнопки. ✅ Background-size: 400% - позволяет создать длинную "ленту" фона, которую мы прокручиваем для эффекта блика. ✅ CSS Keyframes - плавно перемещает позицию фона от 200% до -200%. ✅ Box-shadow & Transform - добавляют кнопке объем и интерактивность при взаимодействии. Полезные материалы: 👉 Flexbox в CSS: Пошаговый курс: https://www.patreon.com/collection/1320002 👉 Frontend: лучшие ресурсы: https://www.patreon.com/collection/1752178 👉 Membership on Patreon: https://www.patreon.com/c/topchiydev/membership 👉 Весь плейлист «CSS с нуля для начинающих»: https://www.youtube.com/playlist?list=PLIEunNjc9UyuznEWwwMmvjpG9V2GxG1DQ 👉 Весь плейлист «HTML с нуля для начинающих»: https://www.youtube.com/playlist?list=PLIEunNjc9UytoWbG_xrleyom6NfiRLBDE Станьте патроном на Patreon и получите доступ к закрытым материалам, бонусным видео и архивам проектов: 👉 https://www.patreon.com/TopchiyDev Подписывайтесь на мой Telegram, где я делюсь фишками веб-разработки и эксклюзивными материалами: 👉 https://t.me/TopchiyDev Если вы нашли это видео полезным - ставьте лайк 👍, подписывайтесь на канал и жмите на колокольчик 🔔. Ваши комментарии и вопросы очень важны для меня - пишите, буду рад помочь! 😀 Спасибо за просмотр и до встречи в новых видео! #CSS #HTML #ButtonAnimation #Frontend #WebDesign #ShineEffect #Верстка #TopchiyDev #ВебАнимация #Tutorial