Трябва да създадете бутон с ефект при задържане на мишката Elementor ?
Ако е така, седнете в този великолепен автобус, защото това, което ще постигнем днес, е в следното видео:
Нека създадем страница и след това да я променим с Elementor, след което изберете структура от 2 колони. В панела нека модифицираме новосъздадения раздел, като изберете Мин. височина на игрището Височина и веднага Мин. височина нека щракнем върху VH след това задайте курсора на 100.
В раздела Стил нека променим цвета на фона на # 070e39.
В първата колона нека пуснем джаджа Button, модифицираме текста му, като напишем Разгледай детайлите и нека го подравним вдясно
В раздела Стил нека го модифицираме книгопечатане като промените размера на 15, трансформация от главни букви et буквен интервал от 1.1
В раздела напреднал, променете всички маржове от 20 и в раздела Персонализирана CSS, нека поставим следния код, който добавя градиент към бутона:
селектор {
–Btn-ширина: 180px;
–Btn-височина: 50px;
–Btn-фон: # 0e1538;
– Ляв градиент: # F803F8;
– Десен градиент: # 03F2FD;
}
селектор на {
Позиция: относителна;
ширина: var (–btn-width);
височина: var (–btn-височина);
}
селектор a: преди,
селектор а: след {
щастлив: ";
Позиция: абсолютно;
вмъкване: 0;
преход: 0.5s;
}
селектор a: n-то дете (1): преди,
селектор a: n-то дете (1): след {
фон: линеен градиент (45 градуса, var (–ляво градиент), var (–btn-фон), var (–btn-фон), var (–десен градиент));
}
селектор a: задържане на мишката: преди {
вмъкване: -3px;
}
селектор a: задържане на мишката: след {
вмъкване: -3px;
филтър: размазване (10px);
}
селектор на span {
Позиция: абсолютно;
нагоре: 0;
ляво: 0;
ширина: 100%;
височина: 100%;
фон: var (–btn-background);
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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...