Изменение цвета кнопок на отдельной странице

Часто возникает необходимость поменять цвет кнопок на отдельно взятой странице и не трогать их на всём сайте. Сделать это просто: На странице, где необходимо это сделать, добавляем HTML- блок, в который пишем следующее:

<style>
.button {
   background: #d90015; /* цвет кнопки */
   border: 1px solid #c90013; /* цвет границы кнопки */
   color:#fff; /* цвет текста на кнопке */
}
.button:hover {
   background: #e03817 !important; /* цвет кнопки ПРИ НАВЕДЕНИИ МЫШИ */
   border: 1px solid #cd3315; /* цвет границы кнопки ПРИ НАВЕДЕНИИ МЫШИ */
   color:#fff; /* цвет текста на кнопке ПРИ НАВЕДЕНИИ МЫШИ */
}
</style>

При этом вы изменим цвет всех кнопок на этой странице. Как на кнопке ниже (в моем дизайне сайта все кнопки — серые по умолчанию).

Смена цвета только одной кнопки

Но если вам не надо менять цвет всех кнопок на странице? А надо изменить цвет только одной? Тогда вы можете воспользоваться или только этим кодом или в дописать к предыдущему.

Для этого нам надо определить в каком блоке находится интересующая нас кнопка. В нашем примере это #section-2688572.

Тогда добавляемый код будет выглядеть следующим образом:

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин
<style>
#section-2688572 .button {
   background: #1a771a; /* цвет кнопки */
   border: 1px solid #166816; /* цвет границы кнопки */
   color:#fff; /* цвет текста на кнопке */
}
#section-2688572 .button:hover {
   background: #499b49 !important; /* цвет кнопки ПРИ НАВЕДЕНИИ МЫШИ */
   border: 1px solid #3c823c; /* цвет границы кнопки ПРИ НАВЕДЕНИИ МЫШИ */
   color:#fff; /* цвет текста на кнопке ПРИ НАВЕДЕНИИ МЫШИ */
}
</style>

Моды для Wfolio.ru

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Виджет обратного отсчета

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Калькулятор цен

Возможность формировать цену заказа с учетом добавления дополнительных услуг.
Изменение цвета кнопок на отдельной странице. Фотограф Константин Шамин

Добавление всплывающего title к фотографии