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

Изменить цвет кнопки

1) У вас ошибка в transition , лучше будет сделать так + focus :

.login-btn2:focus < background-color: red !important; >.login-btn2

2) Либо же используя jQuery :

$('.login-btn2').click(() => < this.toggleClass('colored'); >)

.colored < background-color: red !important; >.login-btn2

3) Либо на нативном js :

 document.getElementsByClassName("login-btn2")[0].addEventListener("click", (event) => < const el = event.target; el.classList.contains('colored') ? el.classList.remove('colored') : el.classList.add('colored'); >, false);

.colored < background: red !important; >.login-btn2

Пример на нативном js JSFiddle

Отслеживать
ответ дан 8 мая 2018 в 6:07
1,506 5 5 серебряных знаков 18 18 бронзовых знаков

.login-btn2:focus < background-color: red; -webkit-transition: 500s ease; transition: 0s ease; >.login-btn2

Отслеживать
ответ дан 8 мая 2018 в 6:05
1,781 1 1 золотой знак 7 7 серебряных знаков 19 19 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет кнопки

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

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

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

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

Как изменить цвет кнопки CSS при нажатии

У меня есть следующие кнопки, которые меняются при наведении на них.

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

В текущем способе нажатие на кнопку делает его тем цветом, который вы выбираете, но нажатие на другое поле экрана возвращает к исходному цвету.

button < padding: 15px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; >button:hover < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

Anderson Lessa 11 Ноя 2019 в 17:42

3 ответа

Лучший ответ

Если вы не хотите использовать javascript и ваш щелчок кнопки не публикуется назад, я бы изменил это так, чтобы вместо него использовались переключатели и метки (при условии, что за один раз можно выбрать только одну — если можно несколько, затем измените радио для галочки):

.scale < /* hide radio button */ position: fixed; left: 100%; top: 100%; >.button < display:inline-block; padding: 15px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; cursor: pointer; >.button:hover < background: black; color: white; >.scale:checked + label < /* selected styled */ background-color: #FE0200; color: white; text-shadow: 1px 1px 3px #8e8e8e; >

  0   1   2   3

Pete 11 Ноя 2019 в 15:07

Я не думаю, что вы можете сделать это с помощью кнопок, не используя JavaScript для добавления класса или изменения стиля.

Однако вы можете сделать это с помощью , добавив стиль :visited :

.button < padding: 15px 30px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family:Arial, Helvetica, sans-serif; border:none; text-decoration:none; >.button:hover,.button:active,.button:visited < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

0 1 2 3

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

Читать:

Приложение как дискорд

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

input[type=checkbox][id^=scale-] < display: none; >.button < padding: 15px 30px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; >input[type=checkbox][id^=scale-]:checked + .button, .button:hover, .button:active, .button:visited < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

0 1 2 3

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

Но цвет почему то остался другим а тем который должен быть? В чем проблема что еще нужно изменить чтобы меню имело зеленый цвет как в этой статье?

/* цвет фона и рамки навигационного меню */ .navbar-default < background-color: #2ecc71; border-color: #27ae60; >/* цвет текста, содержащий название сайта или бренда */ .navbar-default .navbar-brand < color: #ecf0f1; >/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus < color: #d1ffed; >/* Цвет пунктов навигационного меню */ .navbar-default .navbar-nav > li > a < color: #ecf0f1; >/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus < color: #d1ffed; >/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus < color: #d1ffed; background-color: #27ae60; >/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus < color: #d1ffed; background-color: #27ae60; >/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */ .navbar-default .navbar-nav > .dropdown > a .caret < border-top-color: #ecf0f1; border-bottom-color: #ecf0f1; >/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */ .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret < border-top-color: #d1ffed; border-bottom-color: #d1ffed; >/* Цвет стрелочки (треугольничка), открывшегося пункта меню */ .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret < border-top-color: #d1ffed; border-bottom-color: #d1ffed; >/* CSS стили для мобильных устройств */ /* Цвет рамки у кнопки, которая открывает меню */ .navbar-default .navbar-toggle < border-color: #27ae60; >/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */ .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus < background-color: #27ae60; >/* Цвет полосочек в кнопочке, которая открывает меню */ .navbar-default .navbar-toggle .icon-bar < background-color: #ecf0f1; >/* Цвет пунктов меню в раскрывающихся списках */ @media (max-width: 767px) < .navbar-default .navbar-nav .open .dropdown-menu >li > a < color: #ecf0f1; >/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */ .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus < color: #d1ffed; background-color: #27ae60; >>

Результат:

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

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

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

Ответ написан более трёх лет назад
sunnyrio @sunnyrio Автор вопроса
Можешь глянуть на самом сайте? вот ссылка sunnyrio.beget.tech/new/index.html
sunnyrio @sunnyrio Автор вопроса
Я так понимаю градиент еще какойто есть который не дает меню окраситься

sunnyrio,
.navbar-default background-color: #2ecc71;
border-color: #27ae60;
background-image: none;
>