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

Добавлено 03.12.199612.04.2022 автор alexxlab

Содержание

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

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

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

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

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

3 ответа

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

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

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

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

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

Невозможно достичь этого без использования JavaScript без неожиданных побочных эффектов.

Если состояние visited не имеет значения или даже является желательным, ознакомьтесь с ответом @ Blazemonger’s.

Псевдоклассы CSS focus и active определяются потерей своего состояния при нажатии в другом месте на странице.

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

Как поменять цвет кнопки в html

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

HTML тег <button>

Тег <button> используется для создания интерактивных кнопок на веб-странице. В отличие от одинарного тега <input> (с атрибутом type=”button”), при помощи которого также можно создавать кнопки, содержимым тега <button> может быть как текст, так и изображение.

Синтаксис¶

Содержимое тега пишется между открывающим <button> и закрывающим </button> тегами.

Пример¶

Результат¶

Использование CSS стилей ¶

К тегу <button> можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.

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

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

3 ответа

Просто используйте цвет фона:

Чтобы изменить цвет фона элемента, вы можете использовать свойство CSS «background» или «background-color». У некоторых цветов есть эквивалент имени цвета, но вы можете получить более конкретную информацию, используя шестнадцатеричные цвета. Существует множество сайтов, которые могут помочь вам найти точный цвет, например https://htmlcolorcodes.com.

Вот пример с красным фоном:

С именем цвета: <input type=»submit» value=»Donate!»/>

С шестнадцатеричным цветом: <input type=»submit» value=»Donate!»/>

Для цвета фона вы можете использовать свойство «background-color» следующим образом:

Как поменять цвет кнопки в html

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

HTML тег <button>

Синтаксис¶

Содержимое тега пишется между открывающим <button> и закрывающим </button> тегами.

Пример¶

Результат¶

Использование CSS стилей ¶

К тегу <button> можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.

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

3 ответа

Просто используйте цвет фона:

Вот пример с красным фоном:

С именем цвета: <input type=»submit» value=»Donate!»/>

С шестнадцатеричным цветом: <input type=»submit» value=»Donate!»/>

Для цвета фона вы можете использовать свойство «background-color» следующим образом:

Кнопка, изменяющая свой цвет при наведении на нее курсора

207

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:

Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:

JavaScript код:

<script type="text/javascript">
function color_button(x) {
    if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>

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

HTML код:

<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
    Наведите курсор мыши на одну из кнопок!<br>
    <input type="button" value="Кнопка № 1">
    <input type="button" value="Кнопка № 2">

    <input type="button" value="Кнопка № 3">
</form>

Еще не забудьте вставить в заголовок странички (между тегами <head> и </head>) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

HTML код:

<style type="text/css">
    .start { color: yellow; background: green; }
</style>

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

Дата создания: 14:10:21 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 21411 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Применение цвета к HTML-элементам с помощью CSS — HTML

Использование цвета — одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет — одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью CSS, существует множество способов присвоить цвет HTML элементам, чтобы придать им желаемый вид. Эта статья даёт базовые представления о всех способах применения цвета к HTML-элементам с помощью CSS.

К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.

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

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

На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет.

На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML-элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

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

color (en-US): Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
background-color: Цвет фона текста.
text-shadow: Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.
text-decoration-color (en-US): По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.
text-emphasis-color (en-US): Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.
caret-color (en-US): Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> (en-US) или элементам , для которых установлен атрибут contenteditable.

Блоки

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

borders: См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color: Цвет фона блока.
column-rule-color: Цвет линий, которые разделяют колонки текста.
outline-color (en-US): Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid), штриховая (dashed) и так далее.

border-color (en-US): Задаёт единый цвет для всех сторон границы элемента.
border-left-color (en-US), border-right-color (en-US), border-top-color (en-US) , and border-bottom-color (en-US): Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color (en-US) and border-block-end-color (en-US): С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color (en-US) and border-inline-end-color (en-US): Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API: Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика): Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.
WebGL: Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb": Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb.
"#rrggbbaa": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb.
"#rgba": Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue: Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha: Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством <angle>, а именно — в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

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

Вот несколько примеров цвета в HSL записи:

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

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

HTML

HTML, который создаёт вышеупомянутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс .box, который определит эти общие свойства:

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Класс .boxLeft, который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:

background-color определяет цвет фона блока значением rgb(245, 130, 130).
outline (en-US), в отличие от привычного нам свойства border, не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>

CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}

JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar): An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia: Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

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

Вы здесь: Главная — JavaScript — JavaScript Скрипты — Изменение цвета кнопки

Описание: Очень простой и часто используемый скрипт. Очень простой скрипт, который способен реализовать любой, кто занимается созданием сайтов на JavaScript. Но чтобы не тратить на это время, можете воспользоваться уже готовым.

Результат работы:

Наведите мышкой на кнопку.

Код javascript (вставлять между тегами <head> и </head>):

<script language="javascript">
var default_color;
function mouseIn() {
  default_color = document.changecolorbutton.but.style.background;
  document.changecolorbutton.but.style.background = "red";
}
function mouseOut() {
  document.changecolorbutton.but.style.background = default_color;
}
</script>

Код HTML (вставлять между тегами <body> и </body>):

<form name = "changecolorbutton">
  <input type="button" name="but" value="Click me!!!">
</form>

C уважением, Михаил Русаков и сайт http://myrusakov.ru.

Создано 20.04.2010 19:10:41
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Изменить цвет кнопки при наведении мышкой в css

Чтобы изменить значок и текстовый цвет кнопки при наведении курсора мыши в компонент меню

Я использую Меню с компонентами значков в моем проекте. На мыши, нависшие над пунктами меню (например: редактировать), я хочу изменить цвет текста и значка, что-то вроде этого.

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

Я попытался дать цвет:! Important; также, по-прежнему нет результата.

Вот ссылка stackblitz.

задан Prashanth GH 17 сент. ’18 в 12:57

источник поделиться

Изменить цвет текста при наведении курсора

В программе WYSIWYG Web Builder возможно несколькими способами изменить цвет у текста при наведении на него курсора мыши. Ниже будет представлено несколько таких вариантов с использованием псевдокласса hover.

Пример текста, изменяющего свой цвет:

Демо-пример: наведите курсор мыши на этот текст

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#wb_uid2:hover {color:#FF0000;}

Описание значений:

#wb_uid12 — это id текста (его можно посмотреть в исходном коде страницы).

#FF0000 — это цвет текста, на который он изменится при наведении курсора.

Этот способ подходит для программы WYSIWYG Web Builder 11 / 12 версии.

Второй способ для изменения цвета текста при наведении курсора мыши, подходит для WYSIWYG Web Builder 10 / 11 / 12 версии. Здесь будет использоваться id текста, который вы можете сами прописать, через программу.

Пример текста, изменяющего свой цвет:

Демо-пример: наведите курсор мыши на этот текст

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#wb_DemoPrimer2 > span:hover {color:#3A88AF !important;}

Описание значений:

DemoPrimer2 — это id текста, который вы можете прописать в программе.

#3A88AF — это цвет текста, на который он изменится при наведении курсора.

Этот способ подходит для программы WYSIWYG Web Builder 10 / 11 / 12 версии.

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

Пример текста, изменяющего свой цвет в слое:

Демо-пример: наведите курсор мыши на этот слой с текстом

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#DemoPrimer3:hover span{color:#2BAECA !important;}

Описание значений:

DemoPrimer3 — это id слоя, который вы можете прописать в программе.

#2BAECA — это цвет текста, на который он изменится при наведении курсора.

Данный способ работает в программе WYSIWYG Web Builder 11 / 12 версии.

Как изменить в таблице цвет фона при наведении на неё курсора мыши

Всем привет! Сегодня поступила задача задать цвет фона строки таблицы и цвет текста при наведении на неё курсора мыши средствами CSS. Вид таблицы при этом должен стать более изящным и дружественным к посетителю сайта. Кроме того работа с таблице должна быть более комфортной: посетитель, проходят мышью по таблице, мог визуально контролировать на какой строке он фокусирует свой взгляд

Решение

Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору.

Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background.

Например:

tbody tr:hover { background-color: whitesmoke; }

background-color: whitesmoke;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

WooCommerce Colors изменить цвет кнопки и цены товара — info-effect.ru

Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce ! Сегодня вы узнаете как можно очень просто и быстро изменить цвет кнопки «Добавить в корзину». Вы сможете изменить цвет ярлыка «Распродажа» и цвет цены товара. Цвет можно изменить на странице каталога и на странице товара. Очень простой и полезный плагин !

Установить плагин WooCommerce Colors вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Внешний вид — Настроить. На странице настройщика у вас появится новая вкладка — Woocommerce, перейдите на неё.

Далее, здесь вы сможете менять цвет для кнопок и вкладок.

— Secondary Color (buttons and tabs), можно изменить цвет кнопки «Добавить в корзину» на странице каталога.

— Highlight Color (price labels and sale flashes), можно изменить цвет цены товара и ярлыка «Распродажа».

— Primary Color (action buttons/price slider/layered nav UI), можно изменить цвет кнопки «Добавить в корзину» на странице товара.

— Цвет цены и распродажи меняется тем же параметром, что и на странице каталога.

— Subtext Color (used for certain text and asides — breadcrumbs, small text etc), можно изменить цвет хлебных крошек, там где указан путь страницы.

С помощью параметра — Content Background Color (your themes page background — used for tab active states) можно изменить цвет фона контента.

Всё готово ! После изменения цвета, нажмите вверху на кнопку — Сохранить и опубликовать. На сайте у вас отобразятся все изменения !

Ещё больше Супер полезных плагинов Woocommerce Смотри Здесь !!!

Остались вопросы ? Напиши комментарий ! Удачи !

Css, Safari: наведение не меняет цвет кнопки

Возможно, это глупая ошибка, но я не могу понять. У меня есть

Я создал кодовую ручку, чтобы воспроизвести проблему:

Как видите, текст по-прежнему остается черным при наведении мыши на кнопку в Safari.

Я не могу понять, в чем проблема; почему цвет кнопки никогда не меняется, а фон меняется. Я также добавил рамку : сплошной красный цвет шириной 3 пикселя в стиле :hover , и граница тоже работает.

Как я могу сделать цвет текста кнопки белым (или любым другим цветом), когда мышь находится над Safari (и другими браузерами)?

API кнопок — материал пользовательского интерфейса

root	.MuiButton-root	Стили, примененные к корневому элементу.
текст	.MuiButton-text	Стили применяются к корневому элементу, если `variant="text"` .
textInherit	.MuiButton-textInherit	Стили применяются к корневому элементу, если `variant="text"` и `color="inherit"` .
textPrimary	.MuiButton-textPrimary	Стили применяются к корневому элементу, если `variant="text"` и `color="primary"` .
textSecondary	.MuiButton-textSecondary	Стили применяются к корневому элементу, если `variant="text"` и `color="secondary"` .
Outlined	.MuiButton-outlined	Стили применяются к корневому элементу, если `variant="outlined"` .
OutlinedInherit	.MuiButton-outlinedInherit	Стили применяются к корневому элементу, если `variant="outlined"` и `color="inherit"` .
контурный первичный	.MuiButton-outlinedPrimary	Стили применяются к корневому элементу, если `variant="outlined"` и `color="primary"` .
OutlinedSecondary	.MuiButton-outlinedSecondary	Стили применяются к корневому элементу, если `variant="outlined"` и `color="secondary"` .
содержало	.MuiButton-содержало	Стили, применяемые к корневому элементу, если `variant="contained"` .
containsInherit	.MuiButton-containedInherit	Стили применяются к корневому элементу, если `variant="contained"` и `color="inherit"` .
containsPrimary	.MuiButton-containedPrimary	Стили применяются к корневому элементу, если `variant="contained"` и `color="primary"` .
containsSecondary	.MuiButton-containedSecondary	Стили применяются к корневому элементу, если `variant="contained"` и `color="secondary"` .
disableElevation	.MuiButton-disableElevation	Стили применяются к корневому элементу, если `disableElevation={true}` .
focusVisible	.Mui-focusVisible	Класс состояния применяется к корневому элементу ButtonBase, если кнопка сфокусирована на клавиатуре.
disabled	.Mui-disabled	Класс состояния применяется к корневому элементу, если `disabled={true}` .
цветНаследовать	.MuiButton-colorInherit	Стили применяются к корневому элементу, если `color="inherit"` .
textSizeSmall	.MuiButton-textSizeSmall	Стили применяются к корневому элементу, если `size="small"` и `variant="text"` .
textSizeMedium	.MuiButton-textSizeMedium	Стили применяются к корневому элементу, если `size="medium"` и `variant="text"` .
textSizeLarge	.MuiButton-textSizeLarge	Стили применяются к корневому элементу, если `size="large"` и `variant="text"` .
OutlinedSizeSmall	.MuiButton-outlinedSizeSmall	Стили применяются к корневому элементу, если `size="small"` и `variant="outlined"` .
abstractSizeMedium	.MuiButton-outlinedSizeMedium	Стили применяются к корневому элементу, если `size="medium"` и `variant="outlined"` .
abstractSizeLarge	.MuiButton-outlinedSizeLarge	Стили применяются к корневому элементу, если `size="large"` и `variant="outlined"` .
containsSizeSmall	.MuiButton-containedSizeSmall	Стили применяются к корневому элементу, если `size="small"` и `variant="contained"` .
containsSizeMedium	.MuiButton-containedSizeMedium	Стили применяются к корневому элементу, если `size="medium"` и `variant="contained"` .
containsSizeLarge	.MuiButton-containedSizeLarge	Стили применяются к корневому элементу, если `size="large"` и `variant="contained"` .
sizeSmall	.MuiButton-sizeSmall	Стили применяются к корневому элементу, если `size="small"` .
sizeMedium	.MuiButton-sizeMedium	Стили применяются к корневому элементу, если `size="medium"` .
sizeLarge	.MuiButton-sizeLarge	Стили применяются к корневому элементу, если `size="large"` .
fullWidth	.MuiButton-fullWidth	Стили применяются к корневому элементу, если `fullWidth={true}` .
startIcon	.MuiButton-startIcon	Стили, применяемые к элементу startIcon, если они предоставлены.
endIcon	.MuiButton-endIcon	Стили, применяемые к элементу endIcon, если они предоставлены.
iconSizeSmall	.MuiButton-iconSizeSmall	Стили, применяемые к элементу значка, если он указан, и `size="small"` .
iconSizeMedium	.MuiButton-iconSizeMedium	Стили, применяемые к элементу значка, если он указан, и `size="medium"` .
iconSizeLarge	.MuiButton-iconSizeLarge	Стили, применяемые к элементу значка, если он указан, и `size="large"` .

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

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

Изменение цвета кнопок при наведении курсора выглядит довольно впечатляюще и кажется более престижным, чем одноцветные кнопки. Здесь мы обсудим, как изменить цвет фона кнопки с помощью простого CSS.Мы также должны выбрать цвет кнопки, соответствующий цвету нашего веб-сайта. Более того, цвет должен быть материальным, чтобы он выглядел элегантно для наших пользователей.

Изменение цвета фона кнопки при наведении с помощью CSS

У нас есть атрибут :hover для управления событиями наведения HTML-элементов с помощью CSS.

Синтаксис

 .class_name:hover{/* Строки CSS */}

Пример 1

 

<голова>
  Изменение цвета кнопки при наведении с помощью CSS – errorsea
  <стиль>
  .моя кнопка {
    отступ: 10px 20px;
    цвет фона: #1E88E5;
    граница: 0px;
    цвет: #fff;
  }
  .myButton:наведите{
    цвет фона: #fff;
    граница: 1px сплошная #1E88E5;
    цвет: #1E88E5;
  }
  

<тело>

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

Читайте также: Как применить эффект ряби к кнопке с помощью CSS

Пример 2

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

 

<голова>
  Изменение цвета кнопки при наведении с помощью CSS – errorsea
  <стиль>
  .myButton{
    отступ: 10px 20px;
    цвет фона: #1E88E5;
    граница: 0px;
    цвет: #fff;
    переход: линейный 0,25 с;
  }
  .myButton:наведите{
    цвет фона: #fff;
    граница: 1px сплошная #1E88E5;
    цвет: #1E88E5;
  }
  

<тело>

Читайте также: Типы свойств Float и как использовать Float в CSS

Заключение

Надеюсь, теперь у вас есть полное представление о том, как изменить цвет кнопки при наведении с помощью CSS.Это также довольно удобно для пользователя, применяя эффект наведения на HTML-кнопки для изменения фона.

Наслаждайтесь дизайном 🙂

34 кнопки градиента CSS, которые могут придать глубину вашему дизайну

Коллекция лучших концепций кнопок градиента CSS, которые вы можете использовать в 2021 году.

Градиентные цветовые схемы почти мертвы в эпоху плоского веб-дизайна. Но теперь градиентные цвета постепенно возвращаются в веб-дизайн, а также в дизайн мобильных приложений. В недавнем обновлении Adobe XD предоставил нам возможность легко добавлять градиентные цвета; это показывает, как быстро тренд градиентного цвета распространяется среди дизайнеров.Причина, по которой дизайнеры любят градиент, заключается в том, что он добавляет глубины и жизни дизайну. Вы можете легко выделить веб-элемент или элемент приложения среди остальных, используя цветовую схему градиента. В этом списке мы собрали кнопки градиента CSS, которые помогут вам выразить ощущение и глубину функции кнопки.

Простые в использовании дизайны CSS-кнопок с градиентом

Все примеры кнопок градиента CSS в этом списке имеют профессиональную структуру кода, поэтому вы можете легко использовать код в своих проектах.Чтобы сделать работу еще проще для вас, также включены фрагменты кода проектов.

Вот лучшие кнопки градиента CSS.

Текст кнопки градиента CSS

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