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... ✍️
Watch video CSS cutting button effect ✂️ online without registration, duration hours minute second in high quality. This video was added by user Maksym Fariga 11 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 270 once and liked it 18 people.