Изменение цвета фона тега кнопки HTML с помощью css?

Я использую тег кнопки HTML для своих кнопок отправки, а также кнопки, которые направляются на другие страницы и функции, которые я хотел бы иметь кнопки с разными фонами (один синий, один серый, один красный, один зеленый и т. Д.), но, похоже, не может заставить его работать, просто добавив тег кнопки.Изменение цвета фона тега кнопки HTML с помощью css?

Вот то, что я до сих пор HTML

<button class="green_btn" type="submit" name="cnp">News Control</button>

CSS

button { 
    margin: 0 auto 5px auto; 
    display: block; 
    width: 134px; 
    height: 35px; 
    background: url('../images/darkgrey_btn_bg.png') no-repeat left; 
    border: 0 none; 
    font-weight: bold; 
    text-align: center; 
    color: #fff; 
    cursor: pointer; 
} 
.grey_btn button { 
    background: url('../images/darkgrey_btn_bg.png') no-repeat left; 
} 
.green_btn button { 
    background: url('../images/green_btn_bg.png') no-repeat left; 
} 
.ltblue_btn button { 
    background: url('../images/ltblue_btn_bg.png') no-repeat left; 
} 
.blue_btn button { 
    background: url('../images/blue_btn_bg.png') no-repeat left; 
} 
.red_btn button { 
    background: url('../images/red_btn_bg.png') no-repeat left; 
}

по умолчанию я хочу кнопку, чтобы быть garkgrey_btn_bg.png в качестве фона, но если Я хочу использовать green_btn_bg.png для фона, добавив class = "green_btn" в html ничего не делает.

У кого-нибудь есть идеи?

источник

2014-03-29 Meta

Примечание: Я попытался поставить .green_btn после кнопки в css, не имеет никакого эффекта. – Meta

Вы неправильно используете свой класс с помощью .class-name button. Это фактически ищет элемент с дочерней кнопкой.

Здесь вы идете ...

button.grey_btn { 
    background: url('../images/darkgrey_btn_bg.png') no-repeat left; 
} 
button.green_btn { 
    background: url('../images/green_btn_bg.png') no-repeat left; 
} 
button.ltblue_btn { 
    background: url('../images/ltblue_btn_bg.png') no-repeat left; 
} 
button.blue_btn { 
    background: url('../images/blue_btn_bg.png') no-repeat left; 
} 
button.red_btn { 
    background: url('../images/red_btn_bg.png') no-repeat left; 
}

источник

2014-03-29 22:16:59 Seth

спасибо, я попытался полностью удалить «кнопку» из класса в css, и это тоже сработало. Я буду использовать ваш метод и посмотреть, работает ли это (чтобы он определялся как кнопка). Еще раз спасибо! – Meta

http://puu.sh/7OAd9.png отлично работает, еще раз спасибо! – Meta

Добро пожаловать, в любое время. – Seth

Ваши классы ищут кнопки внутри элемент с классом цвета. Например:

.red_btn button

... ищет кнопку внутри родительского элемента с классом red_btn. Это на самом деле должно быть:

button.red_btn

... хотя button часть селектора, вероятно, излишним, если у вас есть другие элементы различных типов с одинаковыми именами классов.

источник

2014-03-29 22:17:24 Utkanos

Я сделал это изначально, однако моя ошибка заключалась в наличии пробела между кнопкой и .red_btn, нарушая все это, lol. Спасибо за информацию! – Meta

Для всех, кто заканчивает тем, кто, как я, не был уверен, как изменить цвет фона кнопки щелкните кнопку ...

Вместо этого в файле CSS:

#footer_join_button { 
    background-color: $light_green; 
}

.. . или даже:

#footer_join_button { 
    color: $light_green; 
}

... правильный атрибут/свойство целевой просто background:

#footer_join_button { 
    background: $light_green; 
}

Примечание: Я использую precompiler SASS, следовательно, потенциально странно выглядящую переменную $light_green выше.

источник

2014-06-25 17:54:48 mecampbellsoup

Изменение цвета фона тега кнопки HTML с помощью css?

ответ

Смежные вопросы