1

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

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

2

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

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

Подякували: IS19711

3

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

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

4 Востаннє редагувалося FakiNyan (06.11.2018 18: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;
}
Подякували: 221VOLT, IS19712

5

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

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

6

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

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

7

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

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

8

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

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

9

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

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

10

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

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

11

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

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

12

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

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

13

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

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

14

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

Подивився я ваш сайт і не зрозумів чим вас не влаштовує чистий HTML & CSS? Навіщо використовувати той конструктор? Воно ж навіть працювати буде швидше, і місця зекономите на 350-350мб)

Подякували: leofun01, ostap34PHP, IS19713

15

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

Xackspel написав:

Подивився я ваш сайт і не зрозумів чим вас не влаштовує чистий HTML & CSS? Навіщо використовувати той конструктор? Воно ж навіть працювати буде швидше, і місця зекономите на 350-350мб)

Погоджуюсь з Вами, але сайт робив використовуючи шаблон і конструктор ще коли починав займатись розробкою. Зараз вчу html&css. Можливо колись перероблю.

16 Востаннє редагувалося 221VOLT (06.12.2018 20:13:37)

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

IS1971 написав:

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

можна просто узяти і дописати до потрібних <a..> клас з кнопки вище, до якого і прописані ефекти
.us-btn-style_3


upd.

IS1971 написав:

Хотілося б змінити засобами CSS цей колір на такий як і в інших кнопок на сайті. Буду вдячний.

взагалі-то, для css та DRY, це і є вся суть використання css-класів замість написання інлайн-стилів --
ми прописуємо стилі для одного класу, і далі додаємо цей клас до всіх багаточисленних потрібних елементів, на багатьох сторінках ))

напевно, це найпростіше -- підгледіти що-де-як працює,
скористатись готовими кусочками

велике складається з дрібниць
не обовязково пиляти велике самостійно з нуля, якщо можна легше і швидше зібрати з готових кусочків))
(це я про елементи html-css-js, не про фреймворки, якщо що)) )

Подякували: IS19711

17

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

Цікава ситуація
На сайті - "Створення сайтів "під ключ" Від односторінкових лендінгів до інтернет-магазинів будь-якого рівня".
Тут - "Зараз вчу html&css"

%)

Подякували: leofun01, ostap34PHP2

18

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

mikeos написав:

Цікава ситуація
На сайті - "Створення сайтів "під ключ" Від односторінкових лендінгів до інтернет-магазинів будь-якого рівня".
Тут - "Зараз вчу html&css"

%)

Прохання не "вумнічати". Є щось по ділу - кажи, ні - проходи мимо.

P.S. Сайти роблять не обов'язково використовуючи голі html/css.

19

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

IS1971 написав:

Прохання не "вумнічати". Є щось по ділу - кажи, ні - проходи мимо.

P.S. Сайти роблять не обов'язково використовуючи голі html/css.

Keep calm )

Я як можна створювати лендінги і інтернет-магазини "будь-якого рівня" не знаючи html i css?

А по ділу, чесно кажучи не перечитував на чому ти то робиш, але -
- Як змінити background color у кнопки?
- Напр. в хромі - права кнопка по тій кнопці - Inspect - дивишся який слектор в кнопки (class чи id чи інші атрибути), дивишся справа які в неї стилі, де вони лежать. - добавляєш свої стилі ( [button-selector] {background-color: black;})

Подякували: IS1971, leofun012

20

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

Прихований текст
mikeos написав:
IS1971 написав:

Прохання не "вумнічати". Є щось по ділу - кажи, ні - проходи мимо.

P.S. Сайти роблять не обов'язково використовуючи голі html/css.

Keep calm )

Я як можна створювати лендінги і інтернет-магазини "будь-якого рівня" не знаючи html i css?

А по ділу, чесно кажучи не перечитував на чому ти то робиш, але -
- Як змінити background color у кнопки?
- Напр. в хромі - права кнопка по тій кнопці - Inspect - дивишся який слектор в кнопки (class чи id чи інші атрибути), дивишся справа які в неї стилі, де вони лежать. - добавляєш свої стилі ( [button-selector] {background-color: black;})

прикол в тому, що деякі замовники повні нулі в сфері розробки сайтів і т.д., і вони заплатять, не розбираючись, чим, як і ким той сайтик був зроблений

Подякували: leofun011