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

Содержание

Как изменить цвет кнопки 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

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере 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 тег <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

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

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере 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 тег <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» следующим образом:

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

75

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).

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

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

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

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

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

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

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. 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, вы можете попробовать любую современную анимацию и дизайн этой кнопки, чтобы придать ей индивидуальность.

Информация / Загрузить демоверсию

Кнопки с анимированным градиентом

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

Информация / Загрузить демоверсию

Кнопка линейного градиента

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

Информация / Загрузить демоверсию

Персиковая пляжная пуговица

The Peach Beach Button — прекрасный пример грамотного использования контрастных градиентных цветов. Эта кнопка использует простой градиент зеленого и желтого цвета в обычном состоянии и превращается в кнопку градиента оранжевого и красного оттенка, когда вы наводите на нее курсор. Создатель умело обработал эффекты изменения цвета в этом примере, что делает его особенным.Поскольку весь дизайн использует последний скрипт CSS, вы можете попробовать новые цвета градиента, а также попробовать новые эффекты, чтобы оживить дизайн.

Информация / Загрузить демоверсию

Карта простого входа

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

Информация / Загрузить демоверсию

Сексуальная кнопка градиента

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

Информация / Загрузить демоверсию

Кнопка градиента CSS от Will

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

Информация / Загрузить демоверсию

Анимированная кнопка-призрак с градиентом CSS

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

Информация / Загрузить демоверсию

Кнопка с градиентной тенью

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

Информация / Загрузить демоверсию

Кнопка градиента CSS с плавным наведением

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

Информация / Загрузить демоверсию

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

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

Информация / Загрузить демоверсию

Анимированная кнопка градиента

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

Информация / Загрузить демоверсию

Светящаяся кнопка градиента

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

Информация / Загрузить демоверсию

Кнопка градиента с тонкой анимацией

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

Информация / Загрузить демоверсию

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

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

Информация / Загрузить демоверсию

Кнопка градиента от Эрика Груца

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

Информация / Загрузить демоверсию

Кнопки градиента изменения цвета фона

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

Информация / Загрузить демоверсию

Кнопки-призраки с градиентом

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

Информация / Загрузить демоверсию

Тени для кнопок с градиентом

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

Информация / Загрузить демоверсию

Кнопка переключения градиента

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

Информация / Загрузить демоверсию

Кнопка градиента при наведении курсора

Gradient Button Hover почти аналогичен кнопкам градиента изменения цвета фона, упомянутым выше.Единственная разница в том, что он имеет другую цветовую схему и более округлые кнопки. С точки зрения сценария существует большая разница в дизайне кнопки градиента. Каждый разработчик использовал различную структуру кода. Но обе структуры кода просты в обращении, поэтому другим разработчикам не составит труда использовать эти кнопки. В этом дизайне вы получаете более яркие цвета, и они выглядят привлекательно, когда они анимированы. Эффекты тени используются с умом, чтобы выделить кнопки на фоне. В целом, это чистая привлекательная коллекция кнопок с градиентом.Все, что вам нужно сделать, это выбрать понравившийся дизайн и использовать его в своем дизайне.

Информация / Загрузить демоверсию

Кнопка с градиентом Cat Disco

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

Информация / Загрузить демоверсию

Кнопки с анимированным градиентом

Кнопки с анимированным градиентом вы получаете три типа кнопок и три типа анимации кнопок. Все три анимации основаны на цветовой схеме градиента, поэтому с помощью этого кода вы получите привлекательную кнопку.Чтобы создать эффект плавной анимации, разработчик использовал в этом дизайне CSS3 и Javascript; Поскольку оба сценария кода являются последними фреймворками, вы также можете использовать другие эффекты анимации. Эффекты анимации вращения и подъема очень профессиональные, поэтому вы можете использовать их на любом современном бизнес-сайте. Анимация Sweep немного интенсивна, поэтому вы должны убедиться, где вы собираетесь использовать эту кнопку.

Информация / Загрузить демоверсию

Анимация кнопок с градиентом

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

Информация / Загрузить демоверсию

Экзистенциальные кнопки градиента

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

Информация / Загрузить демоверсию

Кнопки 3D-градиента

Как следует из названия, этот разработчик предоставил нам 3D-кнопку. Наряду с выступающим анимационным эффектом кнопка 3D выглядит сюрреалистично. Пользователи действительно могут почувствовать, как кнопки выскакивают из экрана. Градиентные цвета используются с умом на всех сторонах 3D-элемента, так что вы получаете хорошо сбалансированную кнопку.Разработчик дал нам как полноцветную кнопку, так и полую кнопку с рамкой. Эффекты теней также используются для обозначения кнопок, выступающих из чистого фона. Все эти эффекты и дизайны полностью созданы с использованием скрипта CSS3, что делает эту кнопку градиента особенной в этом списке кнопок градиента CSS.

Информация / Загрузить демоверсию

Кнопки градиента

Все приведенные выше дизайны кнопок с градиентом CSS были созданы для кнопок призыва к действию.В этом дизайне разработчик сделал градиентные кнопки для ссылок на иконки. В этом наборе вы получаете как светлую, так и темную версию кнопки. Для демонстрации создатель использовал ссылки на профили в социальных сетях. Эффекты лучше видны на темной версии, чем на светлой. Эффекты теней и цвета теней разумно используются в светлой и темной версиях, поэтому вы получаете одинаковое впечатление от обеих версий кнопок. Сценарии HTML5 и CSS3 используются для создания этого чистого дизайна.

Информация / Загрузить демоверсию

Кнопка градиента холодного эффекта

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

Информация / Загрузить демоверсию

Анимированная кнопка градиента

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

Информация / Загрузить демоверсию

Кнопки с градиентом от Arturo

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

Информация / Загрузить демоверсию

Кнопка CSS со светящимся фоном

Кнопка CSS

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

Информация / Загрузить демоверсию

Кнопка градиента контура

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

Информация / Загрузить демоверсию

Кнопка градиента Аарона Скарборо

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

Информация / Загрузить демоверсию

Анимация при наведении на один раздел

Анимация при наведении на один элемент div — это, по сути, эффект наведения для кнопок призыва к действию. Разработчик умело использовал простой фон и эффект наведения, чтобы придать пользователям элемент неожиданности. Эффект градиента плавно перемещается вокруг кнопки, элегантно выделяя ее. Эффект тени также используется для придания рельефности кнопке. Подобные элементы-сюрпризы всегда имеют тенденцию лучше привлекать внимание пользователей и повышать уровень их вовлеченности.Все эти умные эффекты в этом дизайне сделаны с использованием скрипта CSS3, поэтому вы получите лучшую производительность с этим кодом.

Информация / Загрузить демоверсию

Изменение цвета кнопки при нажатии (каждый раз) с помощью JS

Table of Contents #

  1. Изменение цвета кнопки при нажатии
  2. Изменение цвета кнопки при каждом нажатии

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

цвет кнопки onClick:

  1. Добавьте к кнопке прослушиватель событий click .
  2. При каждом нажатии кнопки задавайте для свойства style.backgroundColor значение новое значение.
  3. При необходимости установите свойство style.color .

Вот HTML для примеров в этой статье.

  

  <голова>
    <метакодировка="UTF-8" />
  

  <тело>
    

    <скрипт src="index.js">
  

  

А вот и соответствующий JavaScript.

  const btn = document.getElementById('btn');

btn.addEventListener('щелчок', функция onClick() {
  btn.style.backgroundColor = 'лосось';
  btn.style.color = 'белый';
});
  

Если вам нужно менять цвет кнопки при каждом нажатии, прокрутите вниз до следующего подзаголовка.

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

Мы использовали style.backgroundColor , чтобы изменить цвет фона кнопки и стиль .color для изменения цвета шрифта кнопки.

Изменение цвета кнопки при каждом нажатии #

Чтобы изменить цвет кнопки при каждом нажатии:

  1. Добавьте прослушиватель событий click к кнопке.
  2. При каждом нажатии кнопки задавайте для свойства style.backgroundColor значение новое значение.
  3. Используйте переменную с индексом для отслеживания текущего и следующего цветов.

Вот HTML для этого примера.

  

  <голова>
    <метакодировка="UTF-8" />
  

  <тело>
    

    <скрипт src="index.js">
  

  

А вот соответствующий код JavaScript.

  const btn = document.getElementById('btn');

пусть индекс = 0;

const colors = ['лососевый', 'зеленый', 'синий', 'фиолетовый'];

btn.addEventListener('щелчок', функция onClick() {
  батн.style.backgroundColor = цвета [индекс];
  btn.style.color = 'белый';

  index = index >= colors.length - 1 ? 0 : индекс + 1;
});
  

Если вы загрузите страницу и нажмете кнопку, вы увидите, что кнопка цвет фона чередуется между цветами в массиве.

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

Каждый раз, когда нажимается кнопка, мы либо увеличиваем значение в переменной index , либо устанавливаем его обратно на 0 , если последний цвет уже был показан.

Мы использовали тернарный оператор, что очень похоже на оператор if/else .

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

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

Если мы достигли последнего индекса, мы устанавливаем переменную index обратно на 0 , в противном случае мы увеличиваем значение, хранящееся в переменной, на 1 .

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

Цвет фона — попутный ветер CSS

bg-inherit background-color: inherit;
bg-current background-color: currentColor;
bg-transparent background-color: прозрачный;
bg-black background-color: rgb(0 0 0);
bg-white background-color: rgb(255 255 255);
bg-slate-50 background-color: rgb(248 250 252);
bg-slate-100 background-color: rgb(241 245 249);
bg-slate-200 background-color: rgb(226 232 240);
bg-slate-300 background-color: rgb(203 213 225);
bg-slate-400 background-color: rgb(148 163 184);
bg-slate-500 background-color: rgb(100 116 139);
bg-slate-600 background-color: rgb(71 85 105);
bg-slate-700 background-color: rgb(51 65 85);
bg-slate-800 background-color: rgb(30 41 59);
bg-slate-900 background-color: rgb(15 23 42);
bg-grey-50 background-color: rgb(249 250 251);
bg-grey-100 background-color: rgb(243 244 246);
bg-grey-200 background-color: rgb(229 231 235);
bg-grey-300 background-color: rgb(209 213 219);
bg-grey-400 background-color: rgb(156 163 175);
bg-grey-500 background-color: rgb(107 114 128);
bg-grey-600 background-color: rgb(75 85 99);
bg-grey-700 background-color: rgb(55 65 81);
bg-grey-800 background-color: rgb(31 41 55);
bg-grey-900 background-color: rgb(17 24 39);
bg-zinc-50 background-color: rgb(250 250 250);
bg-zinc-100 background-color: rgb(244 244 245);
bg-zinc-200 background-color: rgb(228 228 231);
bg-zinc-300 background-color: rgb(212 212 216);
bg-zinc-400 background-color: rgb(161 161 170);
bg-zinc-500 background-color: rgb(113 113 122);
bg-zinc-600 background-color: rgb(82 82 91);
bg-zinc-700 background-color: rgb(63 63 70);
bg-zinc-800 background-color: rgb(39 39 42);
bg-zinc-900 background-color: rgb(24 24 27);
bg-neutral-50 background-color: rgb(250 250 250);
bg-neutral-100 background-color: rgb(245 245 245);
bg-neutral-200 background-color: rgb(229 229 229);
bg-neutral-300 background-color: rgb(212 212 212);
bg-neutral-400 background-color: rgb(163 163 163);
bg-neutral-500 background-color: rgb(115 115 115);
bg-neutral-600 background-color: rgb(82 82 82);
bg-neutral-700 background-color: rgb(64 64 64);
bg-neutral-800 background-color: rgb(38 38 38);
bg-neutral-900 background-color: rgb(23 23 23);
bg-stone-50 background-color: rgb(250 250 249);
bg-stone-100 background-color: rgb(245 245 244);
bg-stone-200 background-color: rgb(231 229 228);
bg-stone-300 background-color: rgb(214 211 209);
bg-stone-400 background-color: rgb(168 162 158);
bg-stone-500 background-color: rgb(120 113 108);
bg-stone-600 background-color: rgb(87 83 78);
bg-stone-700 background-color: rgb(68 64 60);
bg-stone-800 background-color: rgb(41 37 36);
bg-stone-900 background-color: rgb(28 25 23);
bg-red-50 background-color: rgb(254 242 242);
bg-red-100 background-color: rgb(254 226 226);
bg-red-200 background-color: rgb(254 202 202);
bg-red-300 background-color: rgb(252 165 165);
bg-red-400 background-color: rgb(248 113 113);
bg-red-500 background-color: rgb(239 68 68);
bg-red-600 background-color: rgb(220 38 38);
bg-red-700 background-color: rgb(185 28 28);
bg-red-800 background-color: rgb(153 27 27);
bg-red-900 background-color: rgb(127 29 29);
bg-orange-50 background-color: rgb(255 247 237);
bg-orange-100 background-color: rgb(255 237 213);
bg-orange-200 background-color: rgb(254 215 170);
bg-orange-300 background-color: rgb(253 186 116);
bg-orange-400 background-color: rgb(251 146 60);
bg-orange-500 background-color: rgb(249 115 22);
bg-orange-600 background-color: rgb(234 88 12);
bg-orange-700 background-color: rgb(194 65 12);
bg-orange-800 background-color: rgb(154 52 18);
bg-orange-900 background-color: rgb(124 45 18);
bg-amber-50 background-color: rgb(255 251 235);
bg-amber-100 background-color: rgb(254 243 199);
bg-amber-200 background-color: rgb(253 230 138);
bg-amber-300 background-color: rgb(252 211 77);
bg-amber-400 background-color: rgb(251 191 36);
bg-amber-500 background-color: rgb(245 158 11);
bg-amber-600 background-color: rgb(217 119 6);
bg-amber-700 background-color: rgb(180 83 9);
bg-amber-800 background-color: rgb(146 64 14);
bg-amber-900 background-color: rgb(120 53 15);
bg-yellow-50 background-color: rgb(254 252 232);
bg-yellow-100 background-color: rgb(254 249 195);
bg-yellow-200 background-color: rgb(254 240 138);
bg-yellow-300 background-color: rgb(253 224 71);
bg-yellow-400 background-color: rgb(250 204 21);
bg-yellow-500 background-color: rgb(234 179 8);
bg-yellow-600 background-color: rgb(202 138 4);
bg-yellow-700 background-color: rgb(161 98 7);
bg-yellow-800 background-color: rgb(133 77 14);
bg-yellow-900 background-color: rgb(113 63 18);
bg-lime-50 background-color: rgb(247 254 231);
bg-lime-100 background-color: rgb(236 252 203);
bg-lime-200 background-color: rgb(217 249 157);
bg-lime-300 background-color: rgb(190 242 100);
bg-lime-400 background-color: rgb(163 230 53);
bg-lime-500 background-color: rgb(132 204 22);
bg-lime-600 background-color: rgb(101 163 13);
bg-lime-700 background-color: rgb(77 124 15);
bg-lime-800 background-color: rgb(63 98 18);
bg-lime-900 background-color: rgb(54 83 20);
bg-green-50 background-color: rgb(240 253 244);
bg-green-100 background-color: rgb(220 252 231);
bg-green-200 background-color: rgb(187 247 208);
bg-green-300 background-color: rgb(134 239 172);
bg-green-400 background-color: rgb(74 222 128);
bg-green-500 background-color: rgb(34 197 94);
bg-green-600 background-color: rgb(22 163 74);
bg-green-700 background-color: rgb(21 128 61);
bg-green-800 background-color: rgb(22 101 52);
bg-green-900 background-color: rgb(20 83 45);
bg-emerald-50 background-color: rgb(236 253 245);
bg-emerald-100 background-color: rgb(209 250 229);
bg-emerald-200 background-color: rgb(167 243 208);
bg-emerald-300 background-color: rgb(110 231 183);
bg-emerald-400 background-color: rgb(52 211 153);
bg-emerald-500 background-color: rgb(16 185 129);
bg-emerald-600 background-color: rgb(5 150 105);
bg-emerald-700 background-color: rgb(4 120 87);
bg-emerald-800 background-color: rgb(6 95 70);
bg-emerald-900 background-color: rgb(6 78 59);
bg-teal-50 background-color: rgb(240 253 250);
bg-teal-100 background-color: rgb(204 251 241);
bg-teal-200 background-color: rgb(153 246 228);
bg-teal-300 background-color: rgb(94 234 212);
bg-teal-400 background-color: rgb(45 212 191);
bg-teal-500 background-color: rgb(20 184 166);
bg-teal-600 background-color: rgb(13 148 136);
bg-teal-700 background-color: rgb(15 118 110);
bg-teal-800 background-color: rgb(17 94 89);
bg-teal-900 background-color: rgb(19 78 74);
bg-cyan-50 background-color: rgb(236 254 255);
bg-cyan-100 background-color: rgb(207 250 254);
bg-cyan-200 background-color: rgb(165 243 252);
bg-cyan-300 background-color: rgb(103 232 249);
bg-cyan-400 background-color: rgb(34 211 238);
bg-cyan-500 background-color: rgb(6 182 212);
bg-cyan-600 background-color: rgb(8 145 178);
bg-cyan-700 background-color: rgb(14 116 144);
bg-cyan-800 background-color: rgb(21 94 117);
bg-cyan-900 background-color: rgb(22 78 99);
bg-sky-50 background-color: rgb(240 249 255);
bg-sky-100 background-color: rgb(224 242 254);
bg-sky-200 background-color: rgb(186 230 253);
bg-sky-300 background-color: rgb(125 211 252);
bg-sky-400 background-color: rgb(56 189 248);
bg-sky-500 background-color: rgb(14 165 233);
bg-sky-600 background-color: rgb(2 132 199);
bg-sky-700 background-color: rgb(3 105 161);
bg-sky-800 background-color: rgb(7 89 133);
bg-sky-900 background-color: rgb(12 74 110);
bg-blue-50 background-color: rgb(239 246 255);
bg-blue-100 background-color: rgb(219 234 254);
bg-blue-200 background-color: rgb(191 219 254);
bg-blue-300 background-color: rgb(147 197 253);
bg-blue-400 background-color: rgb(96 165 250);
bg-blue-500 background-color: rgb(59 130 246);
bg-blue-600 background-color: rgb(37 99 235);
bg-blue-700 background-color: rgb(29 78 216);
bg-blue-800 background-color: rgb(30 64 175);
bg-blue-900 background-color: rgb(30 58 138);
bg-indigo-50 background-color: rgb(238 242 255);
bg-indigo-100 background-color: rgb(224 231 255);
bg-indigo-200 background-color: rgb(199 210 254);
bg-indigo-300 background-color: rgb(165 180 252);
bg-indigo-400 background-color: rgb(129 140 248);
bg-indigo-500 background-color: rgb(99 102 241);
bg-indigo-600 background-color: rgb(79 70 229);
bg-indigo-700 background-color: rgb(67 56 202);
bg-indigo-800 background-color: rgb(55 48 163);
bg-indigo-900 background-color: rgb(49 46 129);
bg-violet-50 background-color: rgb(245 243 255);
bg-violet-100 background-color: rgb(237 233 254);
bg-violet-200 background-color: rgb(221 214 254);
bg-violet-300 background-color: rgb(196 181 253);
bg-violet-400 background-color: rgb(167 139 250);
bg-violet-500 background-color: rgb(139 92 246);
bg-violet-600 background-color: rgb(124 58 237);
bg-violet-700 background-color: rgb(109 40 217);
bg-violet-800 background-color: rgb(91 33 182);
bg-violet-900 background-color: rgb(76 29 149);
bg-purple-50 background-color: rgb(250 245 255);
bg-purple-100 background-color: rgb(243 232 255);
bg-purple-200 background-color: rgb(233 213 255);
bg-purple-300 background-color: rgb(216 180 254);
bg-purple-400 background-color: rgb(192 132 252);
bg-purple-500 background-color: rgb(168 85 247);
bg-purple-600 background-color: rgb(147 51 234);
bg-purple-700 background-color: rgb(126 34 206);
bg-purple-800 background-color: rgb(107 33 168);
bg-purple-900 background-color: rgb(88 28 135);
bg-fuchsia-50 background-color: rgb(253 244 255);
bg-fuchsia-100 background-color: rgb(250 232 255);
bg-фуксия-200 background-color: rgb(245 208 254);
bg-fuchsia-300 background-color: rgb(240 171 252);
bg-fuchsia-400 background-color: rgb(232 121 249);
bg-fuchsia-500 background-color: rgb(217 70 239);
bg-fuchsia-600 background-color: rgb(192 38 211);
bg-fuchsia-700 background-color: rgb(162 28 175);
bg-fuchsia-800 background-color: rgb(134 25 143);
bg-fuchsia-900 background-color: rgb(112 26 117);
bg-pink-50 background-color: rgb(253 242 248);
bg-pink-100 background-color: rgb(252 231 243);
bg-pink-200 background-color: rgb(251 207 232);
bg-pink-300 background-color: rgb(249 168 212);
bg-pink-400 background-color: rgb(244 114 182);
bg-pink-500 background-color: rgb(236 72 153);
bg-pink-600 background-color: rgb(219 39 119);
bg-pink-700 background-color: rgb(190 24 93);
bg-pink-800 background-color: rgb(157 23 77);
bg-pink-900 background-color: rgb(131 24 67);
bg-rose-50 background-color: rgb(255 241 242);
bg-rose-100 background-color: rgb(255 228 230);
bg-rose-200 background-color: rgb(254 205 211);
bg-rose-300 background-color: rgb(253 164 175);
bg-rose-400 background-color: rgb(251 113 133);
bg-rose-500 background-color: rgb(244 63 94);
bg-rose-600 background-color: rgb(225 29 72);
bg-rose-700 background-color: rgb(190 18 60);
bg-rose-800 background-color: rgb(159 18 57);
bg-rose-900 background-color: rgb(136 19 55);

Как изменить «синий» цвет элемента Ultimate по умолчанию с помощью CSS

Синий цвет по умолчанию для окончательного участника #3ba1da и цвет при наведении #44b0ec можно перезаписать с помощью CSS.

Начиная с версии WordPress 4.7, пользователи могут добавлять собственные CSS-стили прямо из административной панели WordPress  Внешний вид >> Настройка >> Дополнительный CSS. Некоторые премиальные темы предоставляют раздел «Пользовательский CSS» в параметрах темы. Вы также можете использовать пользовательские плагины CSS, которые позволяют хранить пользовательский CSS независимо от вашей темы.

Вот пример CSS, который вы можете добавить в свой пользовательский раздел CSS и заменить синий цвет #3ba1da и цвет курсора #44b0ec любым цветом, который вам нужен, в соответствии с дизайном вашего веб-сайта.

 /* Цвета ссылок */
.um a.um-ссылка,
.um .um-tip: наведите курсор,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-field-checkbox.active: not (.um-field-radio-state-disabled) i,
.um .um-имя-члена a: hover,
.um .um-member-more a:hover,
.um .um-member-less a:hover,
.um .um-members-pagi a:hover,
.um .um-cover-add:hover,
.um .um-profile-subnav a.active,
.um .um-item-meta a,
.um-имя-аккаунта a: hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current: hover span.um-account-icon,
.um-раскрывающийся список: hover,
i.um-активный цвет,
span.um-активный цвет
{
    цвет: #3ba1da !важно;
}

.um a.um-ссылка: наведите курсор,
.um a.um-link-hvr: hover {
    цвет: #44b0ec !важно;
}

/* Цвета кнопок */
.um .um-поле-группа-голова,
.picker__box,
.picker__nav -- пред: наведение,
.picker__nav -- далее: наведение,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current: hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a: hover,
.загрузить,
.um-модальный заголовок,
.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled: наведение,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover,
.um .um-кнопка,
.um a.um-кнопка,
.um a.um-button.um-disabled: hover,
.um a.um-button.um-disabled:фокус,
.um a.um-button.um-disabled:активный,
.um input[type=submit].um-кнопка,
.um input[type=submit].um-button:фокус,
.um input[type=submit]:disabled:hover
{
    фон: #3ba1da !важно;
}

.um .um-field-group-head: hover,
.подборщик__нижний колонтитул,
.picker__header,
.picker__day -- infocus: наведение,
.picker__day -- outfocus: наведение,
.picker__day — выделено: наведите курсор,
.picker — выделено .picker__day — выделено,
.picker__list-item: наведение,
.picker__list-item — выделено: наведение,
.picker — сфокусированный .picker__list-item — выделенный,
.picker__list-item — выбрано,
.picker__list-item — выбрано: наведение,
.picker — сфокусированный .picker__list-item — выбранный,
.um .um-кнопка: наведите курсор,
.um a.um-кнопка: наведите курсор,
.um input[type=submit].um-button:hover{
    фон: #44b0ec !важно;
}

/* Альтернативные цвета кнопки */
.гм .ум-кнопка.ум-альт,
.um input[type=submit].um-button.um-alt {
    фон: #eeeeee !важно;
}

.um .um-button.um-alt:наведение,
.um input[type=submit].um-button.um-alt:hover {
    фон: #e5e5e5 !важно;
}
 
.

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

Ваш адрес email не будет опубликован.