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

Разное 

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

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

Вопрос задан

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

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

Через 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

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

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

Будем использовать два способа.

Первый — просто меняем фон и цвет у кнопки. Второй — меняем фон кнопки с помощью псевдоэлемента :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.

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

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

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

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

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

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

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

  • html
  • css
  • класс
  • кнопка
  • наведение

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

6 { цвет фона: #b49543; }

3

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

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

1

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

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

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

Дальнейшие обновления: Я взглянул на ваш скриншот. Похоже, вам не нужно наведение типа кнопки. просто используйте

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

Это потому, что все они являются частью одного и того же элемента DOM. Если вы попытаетесь вызвать его как по типу элемента DOM, так и по классу, он будет думать, что кнопка находится внутри .contactform1.

5

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

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

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

Начнем!

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

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

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

Синтаксис

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

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

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

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

btn », а текст кнопки — « Наведите курсор на меня ».

HTML

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

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

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

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

CSS

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

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

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

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

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

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

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

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *