Кнопка с градиентной рамкой на CSS | Прозрачный фон и эффект стекла | Transparent Button

В этом видео мы детально разберем, как создать стильные кнопки с градиентной обводкой и закругленными углами, используя только HTML и CSS. Мы изучим два варианта: кнопку с полностью прозрачным фоном, через который видна текстура сайта, и кнопку с эффектом матового стекла (Glassmorphism). Вы узнаете секрет «вырезания» внутренней части градиента с помощью свойств маскирования, чтобы оставить только тонкую рамку. 🕒 Тайм-коды: 00:00:00 - Демонстрация результата: кнопки с градиентной обводкой и эффектом стекла 00:00:49 - Подготовка проекта: базовая разметка HTML и стили для фона 00:02:00 - Основные стили кнопки: отступы, шрифты и закругление углов 00:02:47 - Создание градиентного слоя с помощью псевдоэлемента ::before 00:04:10 - Настройка линейного градиента и позиционирование рамки 00:05:00 - Магия CSS: использование webkit-mask для вырезания прозрачного центра 00:05:43 - Настройка маски и кроссбраузерность (Mask Composite) 00:06:53 - Создание второй кнопки с эффектом матового стекла (Backdrop Filter) 00:08:00 - Финальный обзор и сравнение двух эффектов 💡 Ключевые свойства из видео: mask-composite: exclude - Позволяет оставить только рамку, сделав центр элемента прозрачным. backdrop-filter: blur() - Создает эффект замутнения (стекла) для фона под кнопкой. inset: 0 - Удобное сокращение для растягивания абсолютного элемента по краям родителя. 💡 Полезные материалы: 👉 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 #ВебРазработка #Frontend #Gradients #WebDesign #TopchiyDev #УрокиПрограммирования #КнопкаCSS #Glassmorphism