1 Тема від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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

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

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

3 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

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

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

6 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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

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

7 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

8 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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

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

9 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

10 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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

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

11 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

12 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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

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

13 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

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

IS1971 вебсайт

14 Відповідь від Xackspel

  • Xackspel
  • Xackspel
  • Replace Group
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 31.08.2018
  • Повідомлень: 49
    • Репутація: 42

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

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

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

Xackspel вебсайт

15 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

Xackspel написав:

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

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

IS1971 вебсайт

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

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

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

IS1971 написав:

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

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


upd.

IS1971 написав:

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

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

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

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

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

221VOLT вебсайт

17 Відповідь від mikeos

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 177
    • Репутація: 106

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

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

%)

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

mikeos вебсайт

18 Відповідь від IS1971

  • IS1971
  • IS1971
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 03.07.2018
  • Повідомлень: 35
    • Репутація: 3

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

mikeos написав:

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

%)

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

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

IS1971 вебсайт

19 Відповідь від mikeos

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 177
    • Репутація: 106

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

mikeos вебсайт

20 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

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