Нужно создать кнопку с эффектом при наведении с помощью Elementor ?
Если да, то садитесь в этот великолепный автобус, потому что то, чего мы добьемся сегодня, показано в следующем видео:
Давайте создадим страницу, а затем изменим ее с помощью Elementor, затем выберите структуру с двумя столбцами. В панели изменим только что созданный раздел, выбрав Мин. Высота на поле Высокомерие и сразу Мин. Высота давай нажмем на VH затем установите курсор на 100.
Во вкладке Стиль давайте изменим цвет фона на # 070e39.
В первом столбце поместим виджет Button, изменим его текст, набрав Посмотреть детали и давайте выровняем его по правому краю
Во вкладке Стиль давай изменим это оформление изменив размер на 15, преобразование из прописная буква et Межбуквенное расстояние из 1.1
Во вкладке Передовой, изменить все опушки из 20 и в разделе Пользовательские CSS, давайте вставим следующий код, который добавляет к кнопке градиент:
selector {
–Btn-width: 180 пикселей;
–Btn-height: 50 пикселей;
–Btn-background: # 0e1538;
–Левой градиент: # F803F8;
–Право-градиент: # 03F2FD;
}
селектор {
положение: родственника;
ширина: var (–btn-width);
высота: var (–btn-height);
}
селектор a: до,
селектор а: после {
счастливый: ";
положение: абсолютное;
вставка: 0;
переход: 0.5 с;
}
селектор a: nth-child (1): before,
селектор a: nth-child (1): after {
фон: linear-gradient (45deg, var (–left-gradient), var (–btn-background), var (–btn-background), var (–right-gradient));
}
селектор a: hover: before {
вставка: -3px;
}
селектор a: hover: after {
вставка: -3px;
фильтр: размытие (10 пикселей);
}
селектор диапазона {
положение: абсолютное;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: var (–btn-background);
z-индекс: 10;
дисплей: гибкий;
выравнивание содержимого: по центру;
align-items: center;
переполнение: скрыто;
}
Теперь, если вы наведете курсор на кнопку, вы откроете для себя великолепные эффекты.
Чтобы добавить к кнопке эффект блестящего стекла, давайте также вставим следующий код:
/ * Эффект блестящего стекла * /
selector a span :: before {
счастливый: ";
положение: абсолютное;
верх: 0;
осталось: -50%;
ширина: 100%;
высота: 100%;
фон: rgba (255,255,255,0.075);
преобразование: наклон (160 градусов);
}
Вы видите новый эффект, придающий кнопке больше света.
Читайте также: Как создать раздел члена команды с Elementor
Теперь скопируем эту кнопку и вставим во второй столбец. Давайте изменим выравнивание кнопки влево и изменим текст на более.
Теперь вам просто нужно публиковать свою работу или просмотреть ее.
Вот созданы 2 красивые пуговицы.
Получите Elementor Pro прямо сейчас!
Заключение
Так ! Вот и все для этого урока, который покажет вам, как создать кнопку с эффектом наведения с помощью создатель страницы Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
