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

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

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

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

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

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

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

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

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере 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
• Кнопки в Bootstrap 5
• Линейный градиент
• Наследование в CSS
• Несколько фоновых картинок
• Работа с типографикой
• Создание кнопок
• Спрайты
• Установка фона и градиента
• Фоновая картинка

Сменить цвет текста кнопки

Все привет, есть три кнопки, если использовать псевдокласc :focus цвет текста кнопки меняется, но пока не поменялся фокус.
Что прописать в css чтобы при нажатии кнопки 1, текст её был желтый и не терял фокуса пока не нажмешь кнопку 2 или 3, а цвет текста кнопок 2 и 3 оставался белым пока не нажмешь на кнопку 2, она меняет цвет текста кнопки на желтый, а цвет текста кнопок 1 и 3 становился белым и т.д

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Изменить цвет текста и кнопки через CSS на стороннюю тему WordPress
Доброго времени! Установила на Denwer Worpress, после чего на последний установила тему. Теперь.

Сменить цвет
Нужно создать квадрат и закрасить определённым цветом, но ни знаю что быстрее будет работать, что.

Сменить цвет бг слайдера
В общем поставил шаблон на wordpress. Все нормально, но одно не устраивает — цвет фона под.

Не могу сменить цвет фона
Всем, доброе время суток! Ув. профессионалы прошу помощи не могу сменить цвет фона. В браузере.

3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

Дайте код кнопок. Вы как всегда закрутили Что значит «не терял фокуса, пока не нажмешь кнопку 2 или 3»? А если фокус ушел на совсем другой элемент?

Регистрация: 17.09.2016
Сообщений: 450

1 2 3

input type="button" id="mobilButton1" name="" value="Кнопка1"> input type="button" id="mobilButton2" name="" value="Кнопка2"> input type="button" id="mobilButton3" name="" value="Кнопка3">

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

#mobilButton1 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1;/*цвет фона*/ color: #FFFFFF;/*цвет текста*/ font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000;/*тень*/ position: absolute; left: 67px; top: 58px; width: 200px; height: 40px; cursor: pointer; } #mobilButton1:focus { color: #f7f905; } #mobilButton3 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1; background-image: none; color: #FFFFFF; font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000; position: absolute; left: 69px; top: 165px; width: 200px; height: 40px; cursor: pointer; } #mobilButton3:focus { color: #f7f905; } #mobilButton2 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1; background-image: none; color: #FFFFFF; font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000; position: absolute; left: 69px; top: 112px; width: 200px; height: 40px; cursor: pointer; } #mobilButton2:focus { color: #f7f905; }

Добавлено через 6 минут
Схема работы такова, нажал на кнопку1 текст стал желтый, а текст кнопок 2 и 3 остается белым, нажал на кнопку2, текст кнопки2 стал желтый, а текст кнопок 1 и 3 поменялся на белый, и т.д. чтобы можно было видеть какая кнопка сейчас нажата. если использовать :focus то цвет желтый пока есть фокус на этой кнопки стоит щелкнуть влюбое место фокус теряется и цвет становится белым хотя нажата именно та кнопка.