Помогите сделать из синей кнопки красную

HAT

Гуру форума
Регистрация
6 Янв 2015
Сообщения
253
Реакции
56
Решил в сине-белый дизайн интернет магазина добавить красный цвет (кнопки купить, менюшка...)
Какой лучше цвет использовать? Живосайт сделал ff0000, смотрится отлично. Помогите подобрать цвета для кнопки.
Вот выдернул код:
Код:
.button
{
background:#3f95dd;
background:-moz-linear-gradient(top,  #3f95dd 0%, #347fbe 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f95dd), color-stop(100%,#347fbe));
background:-webkit-linear-gradient(top,  #3f95dd 0%,#347fbe 100%);
background:-o-linear-gradient(top,  #3f95dd 0%,#347fbe 100%);
background:-ms-linear-gradient(top,  #3f95dd 0%,#347fbe 100%);
background:linear-gradient(to bottom,  #3f95dd 0%,#347fbe 100%);
color:#fff!important;
text-shadow:0 1px 0 #006AA3;
}

.button:hover{
background:#2e83c9;
background:-moz-linear-gradient(top,  #2e83c9 0%, #256ca3 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e83c9), color-stop(100%,#256ca3));
background:-webkit-linear-gradient(top,  #2e83c9 0%,#256ca3 100%);
background:-o-linear-gradient(top,  #2e83c9 0%,#256ca3 100%);
background:-ms-linear-gradient(top,  #2e83c9 0%,#256ca3 100%);
background:linear-gradient(to bottom,  #2e83c9 0%,#256ca3 100%);
color:#fff!important;
text-shadow:0 1px 0 #006AA3;
}

А то экспериментирую с красными оттенками, они все бракованные (не радуют), специалисты по любому должны знать лучшее сочетание. Синие оттенки которые используются в оформлении можно посмотреть на этом сайте:

оранжевый тоже будет заменен на красный
 
На мой взгляд — самое "оно":

для спокойной кнопки
Код:
background: linear-gradient(to bottom,#dd3f3f 0%,#be3434100%);
text-shadow: 0 1px 0 #a30000;

и для HOVER'a
Код:
background: linear-gradient(to bottom, #c92e2e 0%,#a32525 100%);
text-shadow: 0 1px 0 #a30000;
 
  • Нравится
Реакции: HAT
Использую этот сервис Для просмотра ссылки Войди или Зарегистрируйся
Вставляешь базовый цвет и он подбирает гармонирующие с ним цвета
 
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );

и на hover

background: #ff1500;
background: -moz-linear-gradient(top, #ff1500 0%, #bf0303 100%);
background: -webkit-linear-gradient(top, #ff1500 0%,#bf0303 100%);
background: linear-gradient(to bottom, #ff1500 0%,#bf0303 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1500', endColorstr='#bf0303',GradientType=0 );


не забывайте про то что разные браузеры нужны свои css3 и не забывайте про ie.. в варианте для ie8 надо картинкой
 
  • Нравится
Реакции: HAT
Тоже хочу красную кнопку сделать из синей, но в стандартном шаблоне dle _demo.dle-news.ru поменял цвет в css 3394e6 на нужный и вроде как все должно было стать нормально, но цвет активной кнопки не изменился. Может кто на путь истинный направить?

Разобрался.
 
Последнее редактирование:
Покопайтесь в приоритете стилей. Проверяется добавлением к стилю !important (пример: {background:#3394e6 !important}) Если и в этом случае не изменится, значит не к тому селектору или состоянию селектора применяете стиль.
 
Назад
Сверху