CSS Birth 👶🏼 line эффект 👈
CSS Birth 🤱🏼 line эффект 👈
Простое появление элемента при наведении не вызовет 🤷♀️ ни у кого эмоций.
А вот если сделать это совместив с анимацией другого элемента ➕ анимировать не одно свойство, а несколько, то это будет совсем другое дело.
Имеем кнопку, ссылку или что вы пожелаете с классом .btn. Добавим внуть переменную горизотнального внутреннего отступа.
Псевдоэлементы ::after и ::before содержат переменную высоты линии, абсолютно позиционированы, смещены вниз на всю высоту кнопки - минус высота линии. Зачем спросите вы - иначе она будет лежать за пределами кнопки, а то что за пределами мы не в силах контролировать. Ширина линии равна ширине текста, путем вычитания из 100% ширины горизонтального padding. Это еще один момент, на который стоит обратить внимание. Мы так же могли сделать проще. Задать 100% ширины и потом через transform: scale(0.7) 🔭 - уменьшить нашу линию, но в таком случае для разной длины текста она будет либо шире либо уже самого текста.
Горизонтальное выравнивание линий сделано по центру через left: 50% и отрицательную трансформацию.
Псевдоэлемент ::after изначально прозрачный и находится там же где псевдоэлемент ::before.
При наведении на кнопку увеличиваем ширину до 100% для ::before. Псевдоэлемент ::after в это время движется 🚀 вверх, становится видимым 🔬 и так же становится 100% ширины.
https://github.com/Pots1988/l-b-hover... - ссылка на эффект.
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
#webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course
Подписывайтесь на меня в соц. сетях:
👨💻 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... ✍️
