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

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

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

Вопрос задан 5 лет 1 месяц назад

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

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

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

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

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

Почта

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

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

Почта

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

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

html — Safari не отображает цвет кнопки

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

Вопрос задан 5 лет 5 месяцев назад

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

Просмотрен 508 раз

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

    .form__send {
    float: right;
    margin-right: 9px;
    background: #77c364!important;
    background-color: #77c364!important;
    background-color: rgb(119, 195, 100)!important;
    background-color: vec3(0.47, 0.76, 0.39)!important;
    padding: 8px 15px!important;
    border: 0!important;
    color: #fff;
    box-shadow: 0px 2px 0px rgba(91, 162, 73, 1)!important;
    font-size: 14px!important;
    font-weight: 600!important;
    cursor: pointer}

<form method="post" action="">

                <div>

                    <input size="32" maxlength="36" type="text" name="name" size="40" placeholder="Iмя" val="">

                    <input size="32" maxlength="36" type="email" name="email" size="40" placeholder="E-Mail" val="">

                    <textarea cols="25" rows="10" name="message" aria-invalid="false" placeholder="Паведамленне" val=""></textarea>

                    <input type="submit" name="submit" value="Даслаць">

                </div>

            </form>

• html
• html5
• css3
• safari

Добавьте это свойство

-webkit-appearance: none;

2

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

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

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

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

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

Почта

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

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

Почта

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

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

Как изменить цвет кнопки WooCommerce (3 метода)

Цвета, которые вы используете в дизайне вашего веб-сайта, играют важную роль в его пользовательском опыте (UX). Внешний вид важных элементов, таких как кнопки, может влиять на решения клиентов о покупке и другие ключевые действия. Поэтому очень важно знать, как изменить цвет кнопки WooCommerce в вашем интернет-магазине.

Хорошая новость заключается в том, что для этого есть несколько быстрых и простых способов. Лучший вариант для вас будет зависеть от нескольких факторов, таких как тема WooCommerce, которую вы используете, удобно ли вам работать с кодом и хотите ли вы установить новый плагин.

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

Если вы еще не настроили свой магазин WooCommerce, также ознакомьтесь с нашим пошаговым руководством по созданию веб-сайта электронной коммерции с помощью WordPress.

Тогда вы будете готовы к прыжку прямо сейчас!

1. Используйте параметры вашей темы

Один из самых простых и быстрых способов изменить цвет кнопок WooCommerce — использовать встроенные параметры вашей темы. Чтобы продемонстрировать, как это работает, мы будем использовать нашу быструю и бесплатную тему WooCommerce Botiga: 9.0003

Если вы не используете Botiga, ничего страшного. Существует множество бесплатных и премиальных тем WooCommerce, которые предлагают аналогичные функции. Однако обратите внимание, что каждая тема имеет свою уникальную организацию и набор параметров, поэтому некоторые из них могут дать вам больше свободы настройки, чем другие.

Как только вы установите и активируете тему Botiga на своем веб-сайте, вы можете сразу же начать менять цвета кнопок.

Для этого перейдите к Внешний вид → Настроить → Общие → Кнопки :

Здесь вы можете найти различные настройки и параметры для настройки кнопок вашего сайта.

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

Чтобы изменить цвет фона, вы можете прокрутить вниз до Состояние по умолчанию , а затем выбрать параметр Цвет фона :

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

Если вы хотите изменить способ отображения кнопки, когда пользователь наводит на нее указатель мыши, используйте параметры в разделе Hover State . Вы можете изменить цвет фона, текста и границ.

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

Создание собственной цветовой палитры

Если вы используете Botiga, вы также можете создать уникальную цветовую палитру для своего магазина WooCommerce. Для этого перейдите к Внешний вид → Настроить → Цвета :

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

Вы можете переключить переключатель рядом с Создать свою собственную палитру? , а затем используйте селектор цвета, чтобы выбрать нужные цвета. Когда вы закончите, вы можете нажать кнопку Publish . Это отличный способ быстро изменить внешний вид вашего магазина без необходимости вносить изменения в отдельные страницы и элементы.

2. Установите специальный плагин

Другой вариант изменения цвета кнопок WooCommerce — использование стороннего плагина. Это полезный метод, если ваша тема не предлагает большого контроля над внешним видом кнопок.

Одним из популярных решений является SiteOrigin CSS:

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

Затем перейдите к Внешний вид → Пользовательский CSS . Нажмите на значок глаза, чтобы запустить внешний интерфейс:

Это откроет живой редактор, где вы можете изменить широкий спектр настроек.

Чтобы изменить цвет кнопки, нажмите на кнопку, а затем выберите Украшение Вкладка в левом меню:

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

Когда вы закончите, нажмите кнопку Сохранить CSS (значок дискеты). Не забудьте проверить свои изменения на внешнем интерфейсе вашего сайта, чтобы убедиться, что они выглядят правильно.

3. Вставьте пользовательский код CSS вручную

Третий способ изменить цвет кнопок в WooCommerce — добавить код CSS вручную. Это может быть полезно, если вы не используете Botiga или другую тему с правильными параметрами настройки, не хотите устанавливать новый плагин и вам удобно работать с кодом.

Чтобы начать, зайдите в интерфейс своего веб-сайта, найдите кнопку Добавить в корзину (или любую другую кнопку, которую вы хотите изменить), щелкните ее правой кнопкой мыши и выберите Inspect :

Это запустит DevTools (если вы используете браузер Chrome), где вы сможете найти код HTML и CSS для этой кнопки.

Вам нужно будет найти имена классов и записать их. В нашем примере имя класса кнопки — . wc-block-grid__product-add-to-cart.wp-block-button .

Затем с помощью инструмента выбора цвета найдите идеальный оттенок для вашей кнопки и скопируйте шестнадцатеричное значение. Вернитесь на панель инструментов WordPress и перейдите к Appearance 9.0022 → Настройка → Дополнительный CSS :

В текстовом поле добавьте следующий код:

 /* Состояние по умолчанию */
button.wc-block-grid__product-add-to-cart.wp-block-button {
цвет фона: #111111;
цвет: #ffffff;
цвет границы: #000000;
}
/* Состояние наведения */
button.wc-block-grid__product-add-to-cart.wp-block-button: hover {
цвет фона: #444444;
цвет: #ffffff;
цвет границы: #333333;
} 

Это позволит вам настроить цвета кнопки как в состоянии по умолчанию, так и в состоянии наведения.

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

Когда вы закончите, вы можете просмотреть свой сайт в интерфейсе, чтобы убедиться, что ваша кнопка выглядит правильно. Затем нажмите Опубликовать !

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

Заключение

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

Как мы уже говорили, самый простой способ изменить цвет кнопок — использовать настраиваемую тему WooCommerce, такую ​​как Botiga. Вы можете просто перейти к общим настройкам внешнего вида, чтобы настроить различные параметры кнопок, включая цвета. Кроме того, вы можете установить специальный плагин или вставить собственный код CSS.

У вас есть вопросы об изменении цвета кнопок WooCommerce? Дайте нам знать в комментариях ниже!

Джон Хьюз

Джон — любитель блогов, фанатик WordPress и штатный писатель WordCandy.

«Узнайте, как стилизовать кнопки с помощью HTML и CSS». | от Truly Kasodiya

Использование HTML и CSS.

Цвета кнопок

Изменить цвет фона кнопки с помощью свойства background-color:

Зеленый

button>
Синий
Красный
Серый
Черный

Размеры кнопок — Использование HTML и CSS .

Изменить шрифт размер кнопки со свойством font-size:

10px
12px
16px
20px
24px

кнопка

Изменить отступ кнопки с помощью свойства padding:

10px 24px
12px 28px
14px 40px
32px 16px
16px

\

заполнение кнопки.

↪ Кнопки со скругленными углами

«Кнопки со скругленными углами»

Добавить закругленные углы к кнопке с помощью свойства border-radius:

2px
4px
8px
< button class="button button4">12px
50%

«Скругленные кнопки»

↪ Цветные рамки кнопок

«Цветные рамки кнопок»

41 >
. button {
background-color: #4CAF50; /* Зеленый */
граница: нет;
цвет: белый;
отступ: 15px 32px;
выравнивание текста: по центру;
украшение текста: нет; дисплей
: встроенный блок;
размер шрифта: 16 пикселей; поле
: 4 пикселя 2 пикселя;
курсор: указатель;
}

.button1 {
цвет фона: белый;
цвет: черный;
граница: 2 пикселя сплошная #34495E;
}

.button2 {
цвет фона: белый;
цвет: черный;
граница: 2 пикселя сплошная #D35400;
}

.button3 {
цвет фона: белый;
цвет: черный;
граница: 2px сплошная #800000;
}

.button4 {
цвет фона: белый;
цвет: черный;
граница: 2 пикселя сплошная #FFFF00;
}

.button5 {
цвет фона: белый;
цвет: черный;
граница: 2px сплошная #000000;
}

Используйте свойство border, чтобы добавить границу к кнопке:

Зеленый
Красный
бордовый
Желтый
Черный

«Цветные рамки кнопок»

↪ Кнопки с наведением

< «Кнопки с наведением» 9! DOCTYPE html>

Используйте селектор :hover, чтобы изменить стиль кнопки при наведении на нее указателя мыши.

Совет. Используйте свойство transition-duration для определения скорости эффекта «зависания»:

Green
Синяя
Красный
Серый
Черный

«Наводимые кнопки»

↪ Ширина кнопки

«Ширина кнопки»

0949
1 : нет;
цвет: белый;
заполнение: 15px 32px;
выравнивание текста: по центру;
украшение текста: нет; дисплей
: встроенный блок;
размер шрифта: 16 пикселей; поле
: 4 пикселя 2 пикселя;
курсор: указатель;
}

.