Css кнопка при наведении меняет цвет: html — Цвет кнопки при наведении, отличный от класса в css

Leave a Comment / Css / By /

html — Цвет кнопки при наведении, отличный от класса в css

Задать вопрос

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 29k раз

Через css заданы стили при наведении на кнопку:

    .mybtn{
    	text-align: center; 
    	padding: 8px 10px; 
    	border: solid 1px #777777; 
    	color: #7777777; 
    	background:#ffffff;
    	tansition: all .3s linear;
    	-webkit-transition: all .3s linear;
    	-moz-transition: all .3s linear; 	
    	text-transform: uppercase;
    }
    .mybtn:hover {
    	color: #fff;
    	background: #333;
    	tansition: all . 3s linear;
    	-webkit-transition: all .3s linear;
    	-moz-transition: all .3s linear; 
    }
<button>button1</button>
<button>button2</button>
<button>button3</button>

Размещаю 3 кнопки на одной странице. Вопрос такой:

Мне необходимо, чтобы при наведении на кнопки, у каждой был разный background. По коду видно, что при наведении, фон меняется с белого на черный.
Нужно, чтобы при наведении на:

  • кнопку 1 менялся на синий
  • кнопку 2 менялся на красный
  • кнопку 3 менялся на зелёный
  • html
  • css

1

без разметки могу предложить лишь nth-child

  .mybtn{
    text-align: center; 
    padding: 8px 10px; 
    border: solid 1px #777777; 
    color: #7777777; 
    background:#ffffff;
    tansition: all .
  3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;    
    text-transform: uppercase;
}
.mybtn:hover {
    color: #fff;    
    tansition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear; 
}

.mybtn:nth-child(1):hover { 
  background: blue;
}

.mybtn:nth-child(2):hover { 
  background: red;
}

.mybtn:nth-child(3):hover { 
  background: green;
}
<input type="button" />
<input type="button" />
<input type="button" />

4

Алексей Шиманский, спасибо за поддержку.
Я решил вопрос таким путем, вычитанном на буржуинском форуме.
И потом уже в самой ссылке прописываю нужный цвет через

 
.mybtn{
	text-align: center; 
	padding: 8px 10px; 
	border: solid 1px #777777; 
	color: #7777777; 
	background:#ffffff;
	tansition: all . 3s linear;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear; 	
	text-transform: uppercase;
}
.mybtn:not(:hover){
	color: #000;
    background-color: transparent !important;
}
.mybtn:hover {
	color: #fff;
	background: #333;
	tansition: all .3s linear;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear; 
  }
  .mybtn:active{
	 color: #000;
  }
<p><a href="#">Обычная</a></p>
<p><a href="#">Синяя</a></p>
<p><a href="#">Серая</a></p>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как изменить цвет кнопки: полная инструкция для новичков

🗓️ Обновлено: 30. 01.2022

💬Комментариев: 0

👁️Просмотров: 11553

Поменяем цвет фона и текста у кнопки при наведении.

Будем использовать два способа. Первый — просто меняем фон и цвет у кнопки. Второй — меняем фон кнопки с помощью псевдоэлемента :before

Кнопка внутри формы (button type=»submit»)

Просто меняем фон и цвет:

See the Pen #1 Просто меняем фон и цвет кнопки — button type=»submit» by Pelegrin (@pelegrin2puk) on CodePen.

Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки):

See the Pen Меняем фон с помощью :before — button type=»submit» by Pelegrin (@pelegrin2puk) on CodePen.

Кнопка внутри формы (input type=»submit»):

Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]

Кнопка, как отдельный элемент в html кода:

Просто меняем фон и цвет:

See the Pen Изменить цвет кнопки — обычный div by Pelegrin (@pelegrin2puk) on CodePen.

А теперь меняем цвет, с помощью псевдоэлемента :before

See the Pen Изменить цвет кнопки с помощью :before — обычный div by Pelegrin (@pelegrin2puk) on CodePen.

Кнопка в Bootstrap

Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.

К примеру, у вас есть кнопка

<button type="button">Primary</button>

И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:

.btn.btn-outline-primary:hover {
  background: red; /* Либо любой другой цвет */
  /* А также заменил бы цвет и для border */
}

Как изменить цвет кнопки с помощью Js

Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.

Первый вариант — мы будем добавлять класс с нашей кнопки через js:

See the Pen YzWmEGX by Pelegrin (@pelegrin2puk) on CodePen.

Второй вариант — мы будем менять css стили прямо в js:

See the Pen #2 Меняем цвет кнопки c помощью JS — меняем стили внутри JavaScript by Pelegrin (@pelegrin2puk) on CodePen.

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

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

Кнопка — это основная часть HTML, которая выполняет различные задачи. Используя CSS, вы можете спроектировать и стилизовать кнопку. Существуют различные способы оформления кнопки, такие как окрашивание кнопки, изменение размера, наведение курсора мыши и многое другое.

В этой статье мы сначала узнаем, как создать кнопку, а затем изменим цвет кнопки при наведении.

Начнем!

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

В CSS « :hover » используется для изменения цвета кнопки при наведении. « :hover » — это псевдокласс, который позволяет изменять поведение элементов HTML при наведении на него указателя мыши, таких как ссылки, кнопки, изображения и многие другие.

Ниже приведен синтаксис :hover .

Синтаксис

В представленном выше синтаксисе « a » относится к элементу HTML, где « :hover ». В CSS вы можете установить поведение HTML-элементов при наведении, например цвет, размер и ширину элемента.

Шаг 1: Создайте Div и кнопку

Сначала в HTML мы создадим div и добавим заголовок с

и кнопку с помощью тега. Здесь мы назначим имя класса кнопки как «

btn », а текст кнопки как « Hover on me ».

HTML

Ниже приведен результат выполнения вышеуказанного кода. Вы видите, что заголовок и кнопка созданы:

Теперь перейдите к CSS, чтобы стилизовать div и кнопку одну за другой.

Шаг 2: Стиль кнопки и Div

Сначала мы стилизуем созданный контейнер, используя « div ». Затем мы установим высоту div как « 250px » и цвет фона как « rgb(199, 173, 192) ». Мы также будем использовать свойство границы для настройки границы div, ширины « 5px », стиля « сплошной » и цвета «9».0011 rgb(40, 2, 55) ”.

CSS

Приведенный ниже вывод показывает, что добавленный стиль успешно применен к div:

На следующем шаге мы стилизуем кнопку с помощью CSS.

Теперь мы стилизуем кнопку, используя « .btn », чтобы получить доступ к кнопке, созданной в HTML. После этого мы скроем границу кнопки, установив « none » в качестве значения свойства границы. После этого мы настроим размер шрифта на « large » и отступ кнопки до « 10px », чтобы создать пробелы между содержимым кнопки и границей кнопки. В конце мы установим цвет текста и фона как « rgb(50, 0, 54) » и « rgb(193, 54, 135) »:

Кнопка теперь стилизована up:

Далее мы применим « :hover », чтобы изменить цвет кнопки при наведении.

Шаг 3. Изменение цвета кнопки при наведении курсора

Теперь мы будем использовать « .btn:hover », чтобы связать кнопку с элементом псевдокласса hover. В результате на кнопку будет применено наведение. Затем мы установим цвет фона и цвет текста кнопки как « rgb(66, 2, 41) » и « rgb(119, 255, 0) ». Эти цвета будут применяться к кнопке при наведении на нее курсора мыши:

В представленном ниже выводе вы можете видеть, что цвет кнопки меняется при наведении на нее курсора мыши:

Вот и все! Мы объяснили способ изменения цвета кнопки при наведении с помощью CSS.

Заключение

Для изменения цвета кнопки при наведении используется элемент псевдокласса « :hover ». Для этого свяжите кнопку с :hover и установите цвет кнопки, который будет меняться при наведении на нее курсора. В этой статье мы объяснили способ изменения цвета кнопки при наведении и привели пример.

html — CSS Изменение цвета кнопки при наведении

спросил

6 лет, 1 месяц назад

Изменено 6 лет, 1 месяц назад

Просмотрено 7к раз

У меня есть контактная форма, созданная плагином wpforms. Там он хочет, чтобы я ввел любое имя класса в пробел, чтобы изменить все, что захочу. Допустим, я хочу изменить цвет фона кнопки отправки

Созданный мной код CSS:

 .contactform1 button[type=submit] {
цвет фона: #b49543;
}

У меня есть это, но этот код почему-то не работает. Может быть, это из-за приоритета классов, но я не мог понять.

Не могли бы вы мне помочь? Заранее спасибо!

  • html
  • css
  • class
  • кнопка
  • hover

Сделайте это следующим образом, используйте : hover селектор css

 .
  contactform1:наведите {
цвет фона: #b49543;
}

3

Наведите курсор на кнопку.

 кнопка .contactform1: наведите курсор {
    цвет фона: #b49543;
}

1

Вот фрагмент того, как это выглядит с атрибутом hover. Как видите, это не влияет на кнопку ввода или другие типы кнопок.

 кнопка .contactform1[type=submit]:hover {
  цвет фона: #b49543;
} 
 <дел>

Обновление в ответ на OP: CSS следует методологии структурирования данных в порядке поступления. Таким образом, вы можете ожидать, что этот тип потока будет происходить, когда вы имеете дело с вашим CSS. Попробуйте поставить конкретный CSS после всего остального.