Как изменить цвет кнопки в html

Как изменить цвет кнопки в форме?

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).

Пример 1. Цвет кнопки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид обычной и цветной кнопки в браузере Safari

В данном примере стиль кнопки определяется с помощью пользовательского класса b1 , который задается в теге с помощью атрибута class .

Изменение вида кнопки обусловлено применением свойства background или background-color . Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Как изменить цвет кнопки?

Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button , как показано в примере 1.

Пример 1. Цветные кнопки

Основные параметры кнопки применяем к селектору button , а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рис. 1 продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.

Рис. 1. Цветные кнопки

См. также

• background
• color
• currentColor
• text-fill-color
• Атрибут link
• Атрибуты
• Единицы цвета в CSS
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Линейный градиент
• Наследование в CSS
• Несколько фоновых картинок
• Работа с типографикой
• Создание кнопок
• Спрайты
• Установка фона и градиента
• Фоновая картинка

Справочник по CSS (ЦСС) и ШТМЛ

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Эксплорер и Опера. Применение стилевого параметра background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах.

Результат примера показан на рис. 1.

Рис. 1. Вид обычной и цветной кнопки в браузере Опера

В данном примере стиль кнопки определяется с помощью пользовательского класса b1, который задается в теге с помощью параметра class=»b1″ .

Изменение вида кнопки обусловлено применением атрибута background или background-color . Смена цвета контента или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.

Как изменить цвет кнопки в CSS, если даже !important не помогает?

Учусь разработке и столкнулся с такой проблемой. Прописываю правило к кнопке — все работает, кроме 2-3 вещей.
Например, не меняется цвет текста и не убирается подчеркивание ссылки в кнопке. Хотя все остальное работает.
Вот ссылка на песочницу.

Эта ошибка повторяется несколько раз в последнем попапе ((
В чем может быть дело? Помогите пжлст.

Также не меняется цвет текста в плейсхолдере инпута:

input < border: 1px solid #E0E0E0; color: #000000; /* placeholder color text - WHY DOESN'T IT WORK?*/ border-radius: 3px; padding: 10px; font-size: 14px; width: 200px; margin-top: 10px; margin-bottom: 15px; >

И еще там же болячка с отступом снизу. Прописываю margin-bottom, но он не работает. Хотя вроде все правильно:

Помогите пжлст. Уже устал искать ошибки.

• Вопрос задан более трёх лет назад
• 4232 просмотра

Комментировать
Решения вопроса 1

Вот по порядку ответы на ваши вопросы:
1. Почему не переопределяется цвет и не убирается подчеркивание:
Это происходит т.к. вы применяете стили к блоку .btn, но внутри есть тег «a», у которого есть стили заданные браузером, чтобы этого избежать сделайте так:

.btn a

2. Не меняется цвет placeholder.
Это происходит по тому что на него не действует color. Подробности и примеры тут
3. Проблема с margin-bottom:
Тут все просто, он работает, попробуйте выставить его в значение 100px и увидите как кнопка опустится.

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Антон Романов @a007mr Автор вопроса
Спасибо огромное! Очень круто и подробно все объяснили. Разобрался 🙂
Ответы на вопрос 1

Что касается этого:

btn border: 0px solid #000000;
width: 160px;
color: #ffffff; /* The color of text in button — WHY DOESN’T IT WORK?*/
text-decoration: none; /* The link style in button — WHY DOESN’T IT WORK?*/
background: #FBD840;
padding: 12px;
text-align: center;
margin-bottom: 30px;
border-radius: 3px;
box-shadow: 0px 3px 15px 3px rgba(249,219,91,0.4);
cursor: pointer;

Селектор! Если вы имели ввиду класс btn, то класс обозначаем в таком формате: .btn <. >
Если же вы имели ввиду сам тег , то писать нужно полное название тега
button

Если я чего то не понял, то давайте ка ссылку на песочницу свою

Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Антон Романов @a007mr Автор вопроса

Неправильно скопировал селектор в теме вопроса. На самом деле прописал «.btn». Вот песочница https://codepen.io/a007mr/pen/MzBWdE.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Почему popup окно открывается только со второго нажатия?

• 1 подписчик
• час назад
• 18 просмотров