1

Тема: Як змінити background color у кнопки?

На сайті https://logotyp.pp.ua в самому низу є кнопка "Підписка на новини". При наведенні на неї колір змінюється на фіолетовий. Сайт зроблений використовуючи WPBakery Page Builder. Засобами Builderа цей колір не коректується. Точніше це колір гіперпосилань при наведенні на них. Але для гіперпосилань цей колір задовільняє, хотілося б змінити саме засобами CSS і тільки для цієї кнопки. Уже по різному перепробував. Хотілося б змінити засобами CSS цей колір на такий як і в інших кнопок на сайті. Буду вдячний.

Сайт портфоліо https://logotyp.pp.ua

2

Re: Як змінити background color у кнопки?

https://cdn.discordapp.com/attachments/333936584481177600/509369290932224000/unknown.png

Говоріть українською! Живіть українською! Відчувайте українською!
Подякували: IS19711

3

Re: Як змінити background color у кнопки?

А ще питання як повторюється ефект як у кнопки вище "Усі роботи", коли колір міняється зверху-вниз?

Сайт портфоліо https://logotyp.pp.ua

4 Востаннє редагувалося FakiNyan (06.11.2018 19:54:56)

Re: Як змінити background color у кнопки?

отако
https://codepen.io/anon/pen/vQNLbK

html

<button class="btn">
  <div class="gray"></div>
  <span class="text">Усі роботи</span>
</button>

css

.btn {
  background-color: orange;
  padding: 10px 20px;
  border-radius: 5px;
  font: 550 16px Helvetica;
  text-transform: uppercase;
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
}

.btn .gray {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  top: -100%;
  left: 0;
  z-index: 0;
  transition: all 0.4s;
}

.btn .text {
  position: relative;
  z-index: 0;
}

.btn:hover .gray {
  top: 0;
}
Говоріть українською! Живіть українською! Відчувайте українською!
Подякували: IS19711

5

Re: Як змінити background color у кнопки?

За код дякую, але кнопка уже є. Куда div і код html прописати?

Сайт портфоліо https://logotyp.pp.ua

6

Re: Як змінити background color у кнопки?

вам видніше, то ж ваш сайт

Говоріть українською! Живіть українською! Відчувайте українською!

7

Re: Як змінити background color у кнопки?

Просто кнопку робиться засобами плагина WPBakery builder. CSS код для неї я прописати можу, а от html без втручання в код сайту ні. Чи я помиляюсь?

Сайт портфоліо https://logotyp.pp.ua

8

Re: Як змінити background color у кнопки?

так а шо ви, взагалі, хочете зробити?

Говоріть українською! Живіть українською! Відчувайте українською!

9

Re: Як змінити background color у кнопки?

Повністю повторити стиль інших кнопок. Фоновий колір з Вашою допомогою зробив, ще єфект зміни кольору зверху-вниз залишилось зробити

Сайт портфоліо https://logotyp.pp.ua

10

Re: Як змінити background color у кнопки?

то має налаштовуватись десь в тому WPBakery Page Builder, мабуть

Говоріть українською! Живіть українською! Відчувайте українською!

11

Re: Як змінити background color у кнопки?

Нажаль ні. Інші кнопки так. Ця ні. Навіть розмір її був більший. Трохи зменшив

Сайт портфоліо https://logotyp.pp.ua

12

Re: Як змінити background color у кнопки?

а як там взагалі задається стиль сайту? що той плагін приймає на вхід?

Говоріть українською! Живіть українською! Відчувайте українською!

13

Re: Як змінити background color у кнопки?

Усіма кольорами сайту управляє тема. Але так сталося, що колір саме цієї кнопки є кольором гіперпосилань сайту. Змінивши колір гіперпосилань змінюється колір кнопки і її колір наведення. Але дякуючи Вам з кольором я справився, а от стиль зміни кольору зверху-вниз для цієї кнопки інший ніж в інших кнопок сайту, бо стиль усіх інших кнопок також можна загально змінювати в властивостях теми, але тільки не для цієї кнопки. Хоча це і один плагин builder, а не збірка різних.

Сайт портфоліо https://logotyp.pp.ua