Трябва да се създаде бутон с ефект на задържане на курсора с Elementor ?
Ако е така, седнете в този великолепен автобус, защото това, което ще постигнем днес, е в следното видео:
Нека създадем страница, след което я редактираме с Elementor и след това изберем структура с 2 колони. В панела нека редактираме новосъздадената секция, като изберем Мин. височина на игрището Височина и веднага Мин. височина нека щракнем върху VH след това задайте курсора на 100.
В раздела Стил нека променим цвета на фона на # 070e39.
В първата колона нека пуснем джаджа Button, модифицираме текста му, като напишем Разгледай детайлите и нека го подравним вдясно
В раздела Стил нека го модифицираме книгопечатане като промените размера на 15, трансформация от главни букви et буквен интервал от 1.1
В раздела напреднал, променете всички маржове от 20 и в раздела Персонализирана CSS, нека поставим следния код, който добавя градиент към бутона:
селектор {
--btn-ширина: 180px;
--btn-височина: 50px;
--btn-фон: #0e1538;
--ляв-градиент: #F803F8;
--десен градиент: #03F2FD;
}
селектор на {
Позиция: относителна;
ширина: var(--btn-ширина);
височина: var(--btn-height);
}
селектор a: преди,
селектор а: след {
съдържание: '';
Позиция: абсолютно;
вмъкване: 0;
преход: 0.5s;
}
селектор a: n-то дете (1): преди,
селектор a: n-то дете (1): след {
фон: линеен градиент(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
селектор a: задържане на мишката: преди {
вмъкване: -3px;
}
селектор a: задържане на мишката: след {
вмъкване: -3px;
филтър: размазване (10px);
}
селектор на span {
Позиция: абсолютно;
нагоре: 0;
ляво: 0;
ширина: 100%;
височина: 100%;
фон: var(--btn-фон);
Z-индекс: 10;
дисплей: Flex;
justify-content: център;
подравняване-елементи: център;
overflow: hidden;
}
Сега, ако задържите курсора на мишката върху бутона, ще откриете великолепни ефекти.
За да добавите ефект на блестящо стъкло към бутона, нека поставим и следния код:
/ * Ефект на блестящо стъкло * /
селектор на span :: преди {
съдържание: '';
Позиция: абсолютно;
нагоре: 0;
ляво: -50%;
ширина: 100%;
височина: 100%;
фон: rgba (255,255,255,0.075);
трансформиране: изкривяване (160deg);
}
Наблюдавате нов ефект, който носи повече светлина на бутона.
Прочетете още: Как да създадете секция за членове на екипа с Elementor
Сега нека копираме този бутон и го поставим във втората колона. Нека променим подравняването на бутона вляво и променим текста на Вижте повече.
Сега просто трябва да публикувате работата си или да я прегледате.
Ето създадени 2 красиви бутона.
Вземете Elementor Pro сега!
Заключение
Това е всичко! С това завършва този урок, който ви показва как да създадете бутон с ефект на задържане на курсора, използвайки конструктора на страници Elementor. Ако имате някакви проблеми с разбирането, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...