Хотите создать кнопку с разноцветным градиентом в Elementor ?
По умолчанию Elementor имеет функцию создания градиентного цвета для вашей кнопки, но она ограничена только двумя цветами. В этой статье мы покажем вам, как создать кнопку с многоцветным градиентом в Elementor без помощи дополнений, просто используя собственный CSS Elementor.
Добавление многоцветного градиента к кнопке может сделать ее привлекательной и естественной. Вы можете задаться вопросом: «Можно ли создать кнопку с многоцветным градиентом на вашем сайт? ». Что ж, с Elementor все возможно, и вы можете легко создать кнопку с многоцветным градиентом.
Как создать многоцветную кнопку градиента в Elementor
Прежде чем приступить к обучению, мы хотим сообщить вам, что это руководство будет работать с пользовательским CSS. Пользовательская функция CSS доступна только на Факир Pro; поэтому обязательно обновитесь до про версии.
Теперь перейдите в редактор Elementor. Мы начнем с нуля, поэтому создайте раздел только с одним столбцом. Затем выберите виджет кнопки на панели виджетов, затем перетащите его в область редактирования Elementor. После того, как вы добавили виджет кнопки, вы можете редактировать и стилизовать виджет в соответствии со своими предпочтениями.
В настройках виджета перейдите на вкладку Передовой -> Пользовательский CSS. Скопируйте приведенный ниже фрагмент кода CSS и вставьте его в пользовательское поле CSS.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Если вас устраивает примененный многоцветный градиент (как на изображении выше), вы можете оставить его таким и сохранить свой проект, если хотите. Но если вы хотите настроить его, вы можете сделать это, более конкретно изменив фрагмент кода CSS в блоке объявлений CSS.
Блок объявления CSS начинается с открывающей скобки ( {'' ) и заканчивается закрывающей правой фигурной скобкой(''} ).
Чтобы получить блок объявления, вы можете создать градиент, используя инструменты онлайн градиент css. Cliquez ICI увидеть некоторые инструменты CSS-градиент. Когда вы закончите создание градиента, скопируйте CSS и замените существующий блок объявления новым, вставив CSS.
Ремарка: Вы также можете создать градиентный заголовок в Elementor .
Получить Elementor Pro сейчас !!!
Заключение
В этой статье показано, как легко вы можете создать кнопку с многоцветным градиентом в Elementor. Если вы используете Elementor в качестве конструктора страниц для своего сайт WordPress и вы хотите создать потрясающую кнопку с разноцветным градиентом, эта статья может стать вашим решением.
Одноцветные или двухцветные пуговицы могут выглядеть просто и скучно. Но остерегайтесь создания разноцветных градиентов на кнопках. Пожалуйста, обратите внимание на тон и сочетание цветов, которые вы используете, чтобы ваши пуговицы не выглядели странно и скучно.
Здесь ! В этой статье рассказывается, как создать многоцветную кнопку градиента в Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
