CSS cutting button effect ✂️
CSS cutting button effect ✂️.
Не встречали такой эффект или встречали, но не знали как сделать?
Данный эффект применим для кнопок и ссылок.
Разметка состоит из кнопок и ссылок к классом .btn и атрибутом c data-text, в котором хранится тот же самый текст, что и в самих элементах. Текст в элементах обернут дополнительно в span.
Для класса .btn указываем базовые стили, задаем переменную вертикального отступа, обрезку и минимальную ширину.
span изначально скрываем.
Псевдоэлементы в свойстве content содержат тот же самый текст, что и родительский элемент. У них задана высота в 50%, абсолютное позиционирование и вертикальный отступ, как раз с той переменной, как у родительского элемента, так же задана обрезка.
Для псевдоэлемента ::after задан line-height: 0. Мы это задаем, чтобы сделать высоту строки 0 и тогда она будет прижата к верху псевдоэлемента.
При наведении показываем span, а псевдоэлементы разъезжаются вверх и вниз.
https://github.com/Pots1988/l-b-hover... - ссылка на эффект.
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
✈️ Telegram - канал Web🤖Education
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🎶 TikTok - / maksym_fariga
✍️ Tumblr - / maksymfariga
💬 Twitch - / maksym_fariga
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DP... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы ... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используе... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, v... ✍️
Смотрите видео CSS cutting button effect ✂️ онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Maksym Fariga 11 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 270 раз и оно понравилось 18 людям.