Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Всем привет! В конструкторе Elementor на CMS WordPress не предусмотрена возможность делать кнопки с градиентным фоном. В этой статье я расскажу как можно стилизовать кнопки на своём WordPress сайте в Elementor при помощи дополнения Piotnet Addons For Elementor (PAFE) и без него. Поехали!)

Способ-1 Делаем градиент кнопки при помощи дополнения Piotnet Addons

Устанавливаем плагин Piotnet Addons For Elementor (PAFE). Данный плагин находится в репозитории Вордпресс и можно установить прямо из админки в разделе плагины / добавить новый. После установки и активации, нужно перейти в настройки плагина в админ панели, включить функцию «Gradient Button» и нажать на сохранить «Save Settings»:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

В конструкторе Elementor, в стилях кнопки появится функция «PAFE Gradient Button»:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Открываем данную функцию и включаем её:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

У кнопки поменялся фон на градиент. В настройках градиента кнопки можно поменять цвета, угол наклона градиента, интенсивность перехода и положение. Также можно установить цвета для положения кнопки при наведении, нажав на «наведение». После изменений кнопки нажимайте на зелёную кнопку внизу «обновить» и все изменения сохранятся.

Способ-2 Делаем градиент кнопки без плагина в Elementor

Для стилизации кнопки без плагина нам понадобится сервис «CSS Gradient». И так, начинаем!)

Для начала необходимо перейти в элементор, в редактировать кнопку > расширенные:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Задаём данной копке какой-нибудь класс в поле «CSS классы». Я назвал btn-grad, вы можете назвать как захотите, главное чтобы название было маленькими латинскими буквами без цифр. Можно со знаком минус как у меня или с нижним подчёркиванием btn_grad без точки в начале. Копируем следующую конструкцию с вашим классом btn-grad :

/*Обычный цвет кнопки!*/
.btn-grad .elementor-button{
background: rgb(62,149,255);
background: linear-gradient(148deg, rgba(62,149,255,1) 0%, rgba(0,64,245,1) 100%);
}
/*Цвет кнопки при наведении!*/
 .btn-grad .elementor-button:hover{
     
background: rgb(0,115,255);
background: linear-gradient(148deg, rgba(0,115,255,1) 0%, rgba(2,52,194,1) 100%);
 }

и вставляем этот код в «Custom CSS»:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

После добавления данного кода цвет фона кнопки сразу преобразится в градиент.

Чтобы сделать свой цвет градиента кнопки, необходимо перейти в сервис «CSS Gradient», где можно визуально настраивать цвета, угол наклона градиента, положение и интенсивность. Переходим в сервис CSS Gradient:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Настраиваем необходимый цвет и копируем сгенерированный ниже CSS код, выделив его и скопировав, либо нажав на кнопку «Copy to Clipboard» — копирование одним кликом.

Скопированный код вставляем вместо моего фрагмента кода для обычного цвета кнопки:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Теперь снова генерируем свой цвет в сервисе «CSS Gradient», но для цвета кнопки при наведении и вставляем вместо моего кода здесь:

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Данный способ применится только к одной кнопки, но если у вас на сайте много кнопок и вы хотите сделать все с градиентом, то для каждой кнопки необходимо задать ваш CSS класс например как у меня btn-grad без точки в начале, в поле «CSS классы» как показано ниже на изображении.

А если например хотите какие-то кнопки оставить без градиента, то просто не задавайте нужным кнопкам CSS класс, оставляя поле «CSS классы» пустым.

Кнопка с градиентным фоном в Elementor с дополнением Piotnet Addons и без

Таким образом можно сделать все кнопки с градиентным фоном.

Второй способ универсальный и подойдёт для любого сайта, но нужно будет не забыть поменять класс кнопки с .elementor-button на тот, который установлен на сайте.

Если данная статья была полезна, то поделитесь с друзьями. Также задавайте свои вопросы в комментарии.

Адаптивная, SEO подготовленная WordPress тема
Артём/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: