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

Часто возникает необходимость поменять цвет кнопок на отдельно взятой странице и не трогать их на всём сайте. Сделать это просто: На странице, где необходимо это сделать, добавляем 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>

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