Содержание
Изменение цвета кнопки
Вы здесь:
Главная — JavaScript — JavaScript Скрипты — Изменение цвета кнопки
Описание: Очень простой и часто используемый скрипт. Очень простой скрипт, который способен реализовать любой, кто занимается созданием сайтов на JavaScript. Но чтобы не тратить на это время, можете воспользоваться уже готовым.
Результат работы:
Наведите мышкой на кнопку.
Код javascript (вставлять между тегами <head> и </head>):
<script language="javascript">
var default_color;
function mouseIn() {
default_color = document.changecolorbutton.but.style.background;
document.changecolorbutton.but.style.background = "red";
}
function mouseOut() {
document.changecolorbutton.but.style.background = default_color;
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<form name = "changecolorbutton">
<input type="button" name="but" value="Click me!!!">
</form>
C уважением, Михаил Русаков и сайт http://myrusakov.
ru.
-
Создано 20.04.2010 19:10:41 -
Михаил Русаков
Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
— HTML | MDN
<input> элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.
Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.
value элемента <input> типа color всегда является DOMString, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.
Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.
Входные данные типа color просты из-за ограниченного числа атрибутов, которые они поддерживают.
Предоставление цвета по умолчанию
Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:
<input type="color" value="#ff0000">Если вы не зададите значение, то по умолчанию будет #000000, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.
Отслеживание изменений цвета
Как и в случае с другими типами <input>, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input (en-US) и change (en-US). input запускается на элементе <input> каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value.
Вот пример, который наблюдает за изменениями со временем значения цвета:
colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);
function watchColorPicker(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value;
});
}
Выбор значения
Если реализация элемента <input> типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () (en-US) метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует color, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.
Вариации внешнего вида
Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:
То же самое можно увидеть и в Firefox 55:
В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):
Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс :invalid.
Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания change (en-US) и input (en-US) событий, чтобы взять новый цвет и применить его к каждому <р> элемента в документе.
HTML
HTML довольно прост — пара абзацев описательного материала с <input> типа color с идентификатором colorWell, который мы будем использовать для изменения цвета текста абзацев.
<p>An example demonstrating the use of the <code><input type="color"></code>
control.</p>
<label for="colorWell">Color:</label>
<input type="color" value="#ff0000">
<p>Watch the paragraph colors change when you adjust the color picker.
As you make changes in the color picker, the first paragraph's
color changes, as a preview (this uses the <code>input</code>
event). When you close the color picker, the <code>change</code>
event fires, and we detect that to change every paragraph to
the selected color.</p>JavaScript
Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик load для выполнения основной работы запуска, как только страница будет полностью загружена.
var colorWell;
var defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
Инициализация
Как только страница загружена, вызывается наш обработчик событий загрузки startup():
function startup() {
colorWell = document.querySelector("#colorWell");
colorWell.value = defaultColor;
colorWell.addEventListener("input", updateFirst, false);
colorWell.addEventListener("change", updateAll, false);
colorWell.select();
}
Это возвращает ссылку на элемент color <input> в переменной colorWell, а затем устанавливает значение входного цвета в значение defaultColor. То цвет входное input (en-US) событие настроено, чтобы вызвать updateFirst() функцию и change (en-US) событие, вызывается updateAll(). Они оба видны ниже.
Наконец, мы вызываем select () (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).
Реакция на изменение цвета
Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst() вызывается в ответ на input событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку input события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.
function updateFirst(event) {
var p = document.querySelector("p");
if (p) {
p.style.color = event.target.value;
}
}Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие change. Мы обрабатываем это событие с помощью функции updateAll(), используя Event.target.value для получения окончательного выбранного цвета:
function updateAll(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value;
});
}
Это устанавливает цвет каждого элемента <p> таким образом, чтобы его атрибут color (en-US) соответствовал текущему значению входного цвета, на которое ссылаются с помощью event.target.
Результат
Финальный результат выглядит так:
| Спецификация | Статус | Комментарий |
|---|---|---|
| HTML Living Standard | Живой стандарт | Первоначальное определение |
| HTML5 | Рекомендация | Первоначальное определение |
BCD tables only load in the browser
|
| |
Введение в Chrome DevTools. Панель Elements — Блог HTML Academy
В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.
В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.
Как открыть инструменты разработчика
OS X — Ctrl+Cmd+I.
Windows — F12.
Linux — Ctrl+Shift+I.
Настройки DevTools
Тема интерфейса
Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.
Горячие клавиши
В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.
Расположение панелей
В правом верхнем углу находится кнопка, которая отвечает за расположение панелей. DevTools может находиться снизу, слева, справа, а ещё мы можем открепить отладчик и работать с ним в отдельном окне.
Вкладка Elements
С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.
Как получить информацию об элементе
Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.
Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.
Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.
Введём, например, класс header, и увидим все подходящие элементы:
Визуальный поиск. При открытом отладчике открываем режим визуального поиска, находим нужный элемент и кликаем по нему.
Как внести изменения в элемент на странице
Если вы хотите отредактировать атрибут, класс или текст элемента, сделайте двойной щелчок в нужной точке и вносите изменения.
Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.
Как изменить разметку страницы
Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.
Проверка вёрстки на переполнение
Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.
Проверка на переполнение текстом. Есть два способа:
- Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
- Открываем вкладку Console, вставляем команду
document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.
На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.
Переполнение потоковыми блоками. Находим родителя, в котором лежат нужные элементы и редактируем разметку, добавляем несколько блоков, применяем изменения и смотрим результат.
Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.
Просмотр и тестовое редактирование стилей
Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.
На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.
Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.
Меняем стили прямо в браузере
Любое правило можно отредактировать, а размеры элементов менять прямо в блоке с метрикой. Например, переопределим значение размера шрифта, и результат сразу появится на экране.
Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.
А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style.
Слева у всех элементов есть чекбокс для включения и выключения стилей.
Данные о цвете
У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.
Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.
Гвозди можно заколачивать и микроскопом, но лучше не надо
Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.
Начать обучение
Нажатие на кнопку — согласие на обработку персональных данных
Тесты по HTML
Тесты на знание html с ответами
Правильный вариант ответа отмечен знаком +
1. О чем говорит тэг <p align=»right»> … </p>?
— Текст, заключенный в тэг, будет расположен по центру страницы
— Текст, заключенный в тэг, будет расположен по левому краю страницы
+ Текст, заключенный в тэг, будет расположен по центру страницы
2. Какие единицы измерения могут использоваться для атрибута ширины?
+ Пиксели и %
— Миллиметры и сантиметры
— Пиксели и миллиметры
3. Использование тэга … позволяет добавлять одну строку текста без начала нового абзаца.
— <line/>
+ <br/>
— <td/>
4. Объясните смысл кода, представленного ниже:
+ Будет создана таблица, состоящая из 1 ряда и 3 колонок
— Будет создана таблица, состоящая из 3 рядов и 1 колонки
— Будет создана таблица, состоящая из 2 рядов и 3 колонок
5. Напишите код HTML, который бы создавал кнопку отправки заполненной формы. Имя кнопки – ОК.
— <input type=»ОК» value=»Submit»/>
— <p> input type=»submit» value=»OK»< /p>
+ <input type=»submit» value=»ОК»/>
6. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?
+ <title> … </title>
— <header> … </header>
— <body> … </body>
7. Заполните поля, чтобы отобразить картинку “flower.jpg” с высотой 300 пикселей и шириной 750 пикселей:
— <img ref=”flower” format=.jpg
high=300 px
width=750 px />
— <src img=”flower.jpg”
height=”300%”
width=”750%”/>
+ <img src=”flower.jpg”
height=”300 px” alt=””
width=”750 px”/>
8. Что содержит в себе атрибут href?
+ URL страницы, на которую произойдет перенаправление
— Имя страницы, на которую произойдет перенаправление
— Указание на то, где будет открываться новая страница: в том же или новом окне
9. Какие из перечисленных тэгов относятся к созданию таблицы?
— <header> <body> <footer>
+ <table> <tr> <td>
— <ul> <li> <tr> <td>
тест 10. Укажите тэг, который соответствует элементу списка:
+ <li>
— <ul>
— <ol>
11. О чем говорит следующая запись: <form action=»url» method=»POST»>?
— Создается форма, при заполнении которой вводимые данные будут отображаться
+ Создается форма, при заполнении которой вводимые данные не будут отображаться
— Создается форма, которая будет служить для внесения информации, представленной в виде ссылки (URL)
12. Какое значение следует задать атрибуту type, чтобы оно превращало входной тэг в форму отправки?
+ Submit
— Checkbox
— Radiobutton
13. Для задания размеров тэгу <frameset> требуются следующие атрибуты:
— Высока и ширина
— Площадь и толщина границ
+ Строки и столбцы
14. Выберите верное утверждение.
+ В HTML цвета задаются комбинацией значений шестнадцатеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F
— В HTML цвета задаются комбинацией значений двоичной системы исчисления: 0 или 1
— В HTML цвета задаются комбинацией значений восьмеричной системы исчисления: 0, 1, 2, 3, 4, 5, 6, 7
15. Какие тэги делают шрифт текста жирным?
— <ins> и <del>
— <li> и <ul>
+ <b> и <strong>
16. Какие тэги используются для определения заголовков?
+ h2-h6
— Header
— Heading
17. Неотображаемые комментарии в HTML задаются следующим образом:
— <! — Your comment -!>
+ <! — — Your comment — -!>
— <!p> Your comment </!p>
18. Что означает код на картинке?
+ Переход по ссылке произойдет на новой странице
— Переход по ссылке произойдет на текущей странице
— На текущей странице появится текст «Learn Playing»
19. Перечислите основные модули контента, существующие в HTML 5.
— Image, Media, Metadata, Link, Heading, Color, Input Value
+ Metadata, Embedded, Interactive, Heading, Phrasing, Flow, Sectioning
— Flow, Static, Link, Header, Body, Footer, Processing, Chase
тест-20. Укажите, какой элемент HTML 5 отвечает за воспроизведение видео:
+ <video>
— <media>
— <movie>
21. Элемент <canvas> используется для:
— Прикрепления таблиц Excel
— Управления данными в базе данных
+ Прорисовки графики
22. Какой тэг содержит навигацию?
+ <nav>
— <geo>
— <metanav>
23. SessionStorage – это клиентское решение в HTML 5, которое позволяет:
— Извлекать и использовать данные предыдущих сессий при условии того, что не были очищены cash и cookie
— Создавать базу данных решений пользователей в памяти браузера
+ Извлекать и использовать данные только текущей сессии
24. Что создастся при исполнении следующего кода:
<svg>
<line x1=»50″ y1=»0″ x2=»50″ y2=»100″
style=»stroke:black» />
<line x1=»0″ y1=»50″ x2=»100″ y2=»50″
style=»stroke:black» />
</svg> ?
+ Знак «плюс»
— Знак «минус»
— Знак «равно»
25. Функция HTML 5 «
— Встроенную в основной функционал сайта карту мира
+ Данные о местонахождении пользователя
— Данные о местонахождении сервера
26. Заполните пропуски таким образом, чтобы получился валидный HTML документ. «First paragraph» — комментарий.
<___>
<body>
<! — — First paragraph ___>
<___> This is the first paragraph! </p>
<___>
</html>
— html/; — — ?; p; /body
— html v.5; — — !; /p; /body
+ html; — — !; p; /body
27. HTML – это
+ Язык разметки
— Библиотека гипертекста
— Скриптовый язык
28. Обязательно ли использование тэгов <html> … </html>?
+ Да, без них браузер не распознает HTML-документ
— Да, если HTML-документ создается в блокноте или другом текстовом редакторе. В специальном компиляторе HTML эти тэги можно не использовать
— Не обязательно
29. Какой атрибут позволяет объединить ячейки таблицы по вертикали?
— Union
— Colspan
+ Rowspan
тест_30. Допустимое число заголовков первого уровня в HTML-документе составляет:
+ 1
— 3
— 7
31. Текст, выделенный курсивом, представлен в следующей записи:
— <del> курсив </del>
+ <i> курсив </i>
— <hr> курсив </hr>
32. В HTML не существует … тэгов.
— Одиночных
— Парных
+ Тройных
33. При создании сайтов используют кодировку:
+ UTF8
— ASCII
— UTF-32
34. HTML-документ может иметь расширения:
— .html
+.html или .htm
— .html или .txt
35. Укажите устаревшие тэги для HTML 5.
+ <applet>, <blink>, <u>
— <ul>, <audio>, <pre>
— <code>, <s>, <embed>
36. Тэг, подключающий к существующему HTML-документу скрипты, которые выполняются на клиентской стороне – это:
— <object>
+ <script>
— <client>
37.
— ;
+ /
38. Список, в котором элементы перечисления отмечаются буллетами, позволяет создать тэг:
+ <ul>
— <ol>
— <bl>
39. Укажите корректную запись для создания чек-бокса:
— <input checkbox>
— <type input=”checkbox”>
+ <input type=”checkbox”>
тест*40. Укажите корректную запись для создания выпадающего списка:
+ <input type=”dropdown”>
— <input dropdown list>
— <dropdown list>
41. Какой атрибут HTML указывает альтернативный текст для изображения, если данное изображение не отобразится?
— imgalt
— imgvar
+ alt
42. Какой HTML-тэг используется для определения футера документа или раздела?
+ <footer>
— <bottom>
— <section>
43. HTML-тэг, позволяющий воспроизводить аудиозаписи – это:
— <music>
+ <audio>
— <sound>
44. В HTML 5, onblur и onfocus – это:
+ Атрибуты событий
— Атрибуты стиля
— Атрибуты подключения базы данных
45. Графика, определенная SVG, отображается в формате:
— CSS
— JSOM
+ XML
46. Что определяет тэг <aside>?
+ Дополнительное содержимое, т.е. то, что не включает основной документ
— Ссылку на подключенный документ
— Цветовое решение документа
Форматирование текста тегами псевдо-HTML — Клеверенс
Последние изменения: 27.11.2018
Выберите уточнение:
Тексты в окнах на терминале можно форматировать при помощи тегов псевдо-HTML. Использование форматирования позволяет отобразить информацию на экране в удобном пользователям виде, выделить важные сообщения в тексте и т.п.
Список тегов, которые можно использовать при форматировании текста:
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Теги можно заключать друг в друга, например,
<r size=»12″>Обычный текст <b> выделение текста жирным </b> снова обычный текст</r>.
Результат: Обычный текст выделение текста жирным снова обычный текст
При этом, вложенные тэги, если у них не задан размер или цвет, наследуют эти атрибуты у тега верхнего уровня, т.е. в приведенном примере жирный текст «выделение текста жирным» будет также иметь размер 12, как и остальной текст.
Задание размера текста
Для задания размера текста используется необязательный атрибут size=»…». Если атрибут не задан, то для вывода текста используется размер по умолчанию, в соответствии со стилем отображения.
Размер может задаваться двумя способами:
|
|
|
|
|
|
|
|
Размерами текстов в разных местах интерфейса по умолчанию Вы можете управлять, используя стиль клиентского приложения на ТСД. Подробнее про это читайте здесь.
Задание цвета текста
Для задания цвета текста используется тег с именем цвета или необязательный атрибут color=»…». Если атрибут не задан, то для вывода текста используется цвет по умолчанию, в соответствии со стилем отображения.
Цвет может задаваться тремя способами:
|
|
|
|
|
|
|
|
|
|
|
|
Таблица цветов:
Была ли статья полезна?
3. Диалоги, касающиеся содержимого изображений
Выбор цвета в GIMP
В GIMP цвет выбирается сначала в цветовом ползунке в центре, затем в двухмерной области слева. Цветовой ползунок справа определяет один из компонентов цвета H (тон), S (насыщенность), V (Яркость) в цветовой системе
HSV
, R (красный), G (зелёный), B (синий) в цветовой системе RGB. Выбор кнопки справа от ползунка фиксирует значение этого компонента для выбора двух других компонентов из цветной области слева.
CMYK
Рисунок 15.26. CMYK
Получить доступ к этому выборщику вы можете, щёлкнув по пиктограмме принтера. Этот режим дает возможность управлять цветами, используя цветовую модель CMYK.
Треугольник
Рисунок 15.27. Треугольник
В этом режиме цвет выбирается при помощи цветового круга, в котором настраивается тон, и треугольника , в котором настраиваются яркость и насыщенность.
Акварель
Рисунок 15.28. Выбор цвета: акварель
Принцип выбора цвета в этом режиме больше всего похож на смешивание акварельных красок в воде. Текущий цвет переднего плана немного изменяется нажатием и движением по цветовой области справа. На пример, если цвет переднего плана белый и при этом нажать на красный цвет, то цвет переднего плана станет светло-красным. Чем дольше двигать по одному цвету, тем больше этого цвета будет в итоговом цвете. Бегунок справа от цветовой части диалога определяет насколько сильно нажатый цвет влияет на текущий цвет. Нажатый цвет добавляется путём умножения каждого компонента текущего цвета на величину, связанную со значением компонента нажатого цвета. Поэтому, если какой-то компонент текущего цвета равен нулю (например, синий), то чистый цвет этого компонента (чистый синий) получить невозможно.
Образцы цветов
Рисунок 15.29. Палитра: выбор цвета
Этот выборщик цвета преподносит список цветов в активной палитре. Список выглядит также, как и в Диалоге палитр. Цвет переднего плана и фона устанавливаются нажатием на цвет. Также можно использовать клавиши-стрелки для перемещения по списку.
Шкала
Рисунок 15.30. Шкала
В этом режиме для каждого параметра цвета есть шкала. Настройка производится по шести параметрам — тон, яркость, насыщенность, красный канал, синий канал, зеленый канал. Кроме того, в этом режиме полученный цвет отображается и в виде шестнадцатиричного триплета, который можно использовать при написании кода HTML.
Пипетка
Поведение пипетки полностью отличается от поведения инструмента «Пипетка». Вместо получения цвета из активного изображения даётся возможность забирать цвета со всего экрана.
The downside is that you get colors after they got processed
by the full system color stack, in particular color
management. It means that the resulting color values may end
up different from ones returned by the
color picker tool
when picking over the canvas. It is up to you to make an
informed choice of which color picker to use.
Нотация HTML
Обратитесь в глоссарий за дополнительной информацией по Нотации HTML. Также можно использовать ключевые слова CSS (Cascading Style Sheets — каскадная таблица стилей). Для этого необходимо ввести первую букву слова, чтобы получить список названий цветов, начинающихся с этой буквы:
Рисунок 15.31. Пример ключевых слов CSS
При нажатии правой кнопки мыши в поле ввода нотации HTML появится контекстное меню, позволяющее править нотацию, в особенности вставить скопированную сложную нотацию. Это меню ведёт к разным Методам ввода, позволяющие вводить иностранные символы, и к возможности Ввести контрольные символы Unicode. Эта огромная область находится за пределами этого руководства; за дополнительной информацией обратитесь сюда [UNICODE].
Рисунок 15.32. Всплывающее меню «Нотация HTML»
Понимание тега HTML 4.0
Применение фона к кнопке
Для доработки
различие между кнопкой обычной формы и кнопкой HTML 4.0, мы должны принудительно
новая кнопка, чтобы избавиться от уродливого серого фона. Это можно сделать
с небольшим прикосновением к CSS (каскадные таблицы стилей), например следующие
правила:
Давайте начнем преобразование, ладно?
Спасите нашу планету!
Под водой
Фон кнопки может быть даже прозрачным,
указание цвета фона в объявлении стиля на «прозрачный»:
Прозрачный фон!
Управление шириной / высотой кнопки
По умолчанию размеры кнопки автоматически устанавливаются равными
размеры, необходимые для размещения содержимого внутри, например изображения.Часто бывает, что вам нужно вручную управлять этим размером, чтобы
соответствовать вашему дизайну. Используя другое объявление CSS, вы можете. Чтобы контролировать
ширину / высоту кнопки используйте следующее объявление стиля:
Давайте создадим серию идеально прямоугольных кнопок, а затем
используя вышеуказанные знания:
H
я
!
Пример — имитация кнопок браузера с использованием тега
<кнопка> <кнопка>
<кнопка> GitHub <кнопка> @jgthms <кнопка> Сохранить <кнопка> Удалить
<кнопка> GitHub <кнопка> GitHub <кнопка> GitHub <кнопка> GitHub
Если кнопка содержит только значок, Bulma будет следить за тем, чтобы кнопка оставалась квадратной , независимо от размера кнопки или значка.
<кнопка>
<кнопка>
<кнопка>
<кнопка>
<кнопка>
<кнопка>
<кнопка>
<кнопка>
<кнопка>
Группа кнопок
#
Если вы хотите сгруппировать кнопки вместе в одной строке , используйте модификатор is-grouped в контейнере поля :
Пример
Сохранить изменения
Отмена
Удалить сообщение
HTML
<кнопка>
Сохранить изменения
<кнопка>
Отмена
<кнопка>
Удалить сообщение
Дополнения к кнопкам
#
Если вы хотите использовать кнопки в качестве дополнений , используйте модификатор has-addons в поле Контейнер :
HTML
<кнопка>
Влево
<кнопка>
Центр
<кнопка>
Вправо
Группа кнопок с надстройками
#
Вы также можете сгруппировать аддоны:
HTML
<кнопка>
Полужирный
<кнопка>
Курсив
<кнопка>
Подчеркнутый
<кнопка>
Влево
<кнопка>
Центр
<кнопка>
Вправо
Список кнопок
#
Вы можете создать список кнопок с помощью контейнера кнопок .
Сохранить изменения
Сохранить и продолжить
Отмена
Если список очень длинный , он автоматически переносится на нескольких строк , сохраняя при этом все кнопки на одинаковом расстоянии .
Один
Два
Три
Четыре
Пять
Шесть
Семь
Восемь
Девять
10
Одиннадцать
Двенадцать
13
14
Пятнадцать
Шестнадцать
Семнадцать
18
Девятнадцать
Двадцать
Вы можете соединить кнопки вместе с модификатором has-addons .
Используйте модификаторы по центру или по правому краю , чтобы изменить выравнивание .
да
Может быть
Нет
да
Может быть
Нет
Вы можете использовать любой класс модификатора на каждой кнопке, чтобы различать их.Не забудьте добавить модификатор is-selected , чтобы убедиться, что выбранная кнопка находится на выше своих братьев и сестер.
да
Может быть
Нет
да
Может быть
Нет
да
Может быть
Нет
Хотя этот список стиля кнопок может быть достигнут либо с помощью поля сгруппировано , либо с новым классом кнопок , есть несколько отличий:
-
кнопокимеет более простую разметку -
кнопкимогут содержать толькокнопокэлементов - Поле
сгруппированоможет содержать любого типа изуправлениявходов - Поле
сгруппированоможно принудительно разместить все элементы управления в одной строке - с помощью поля
сгруппировано, вы можете развернуть один из элементов управления
В принципе, если вам нужен только список из кнопок , рекомендуется использовать кнопки .Если вам нужно больше контроля над стилем и элементами, используйте группу форм.
Переменные
#
Имя
Тип
Ценить
Расчетное значение
Вычисляемый тип
размер
расчет (0.5em - # {$ button-border-width}) $ обивка пуговица горизонтальная размер
$ цвет кнопки-наведения-границы переменная
цвет
$ кнопка-фокус-цвет границы переменная
цвет
$ кнопка-фокус-размер-тень размер
$ кнопка-фокус-поле-тень-цвет соединение
$ button-active-border-color переменная
цвет
$ button-text-hover-background-color переменная
цвет
$ кнопка-призрак-цвет границы строка
$ кнопка-призрак-наведение-цвет переменная
цвет
$ украшение-призрак-призрак строка
$ button-disabled-background-color переменная
цвет
$ button-disabled-border-color переменная
цвет
$ button-static-background-color переменная
цвет
$ button-static-border-color переменная
цвет
Правда о лучших и худших цветах кнопок с призывом к действию
Компании в Интернете постоянно ищут наилучшие способы привлечь клиентов и побудить их к действию.
Если вы владелец малого бизнеса, возможно, вы тоже ищете новые способы привлечь внимание клиентов.
Один из самых простых способов сделать это — использовать цветовую схему. Было проведено множество исследований, чтобы доказать, какие цвета лучше всего подходят для кнопок призыва к действию на веб-сайтах.
Ниже приведены 3 лучших цвета кнопок для кликов, за которыми следуют три худших цвета кнопок для кликов.
3 лучших цвета для кнопок призыва к действию:
1.Красный. Красный цвет выделяется на большинстве веб-страниц. Он пробуждает страсть, волнение и безотлагательность. Если вы хотите, чтобы ваши клиенты приняли срочные меры в отношении вашего продукта (например, купили его, загрузили электронную книгу и т. Д.), Тогда красный — правильный цвет. Как ни странно, многие люди заявляют, что красный обычно идет рука об руку со стопом, но исследования показывают, что это один из лучших цветов для кнопок призыва к действию.
2. Зеленый . Если продукт или услуга, которые вы продаете, связаны с окружающей средой, психологией и миром, тогда зеленый цвет — правильный цвет кнопки призыва к действию для вас.Зеленый успокаивает и может ассоциироваться со словом «идти», что мотивирует многих клиентов. Вашим клиентам может быть проще нажать на зеленую кнопку, чем на кнопку другого цвета.
3. Оранжевый или желтый . Апельсин возбуждающий и теплый. У большинства людей это ассоциируется с теплом от солнца. Это тепло, в свою очередь, побуждает людей действовать. Когда клиенты чувствуют себя счастливыми, они с большей вероятностью купят продукты, которые ассоциируются у них со счастьем. Не забываем, что весь сайт Amazon окрашен в желтый и оранжевый цвета.Это работает для них, и они проводят ТОННУ тестирования оптимизации веб-сайтов, поэтому есть много доказательств того, что это будет работать и для вашего веб-сайта.
3 худших цвета кнопок призыва к действию:
1. Черный. Черный — темный и мрачный. Он заставляет многих думать, что вы недостаточно старались, и он имеет тенденцию сливаться с фоном большинства страниц, что делает его худшим цветом для использования в качестве кнопки призыва к действию.
2. Белый . Несмотря на то, что технически это отсутствие всего цвета, белый на самом деле ужасный цвет кнопок, если вы хотите, чтобы посетители вашего веб-сайта предприняли какие-либо действия.На это есть две причины: во-первых, белый цвет сливается с фоном, а во-вторых, белый не вызывает эмоций. Это две вещи, которые вы никогда не хотите требовать от кнопки призыва к действию.
3. Коричневый . Коричневый не имеет оттенка тепла или действия. Это не мотивирует ваших клиентов нажимать на вашу кнопку с призывом к действию. Вместо этого многие считают это скучным и уродливым.
Цветовые палитры различаются от веб-сайта к веб-сайту, но самое важное, что нужно помнить, — это то, что ваши кнопки призыва к действию должны иметь здоровый контраст с фоном вашего веб-сайта.Если они это сделают, вы, вероятно, увидите, что ваши кнопки нажимаются гораздо чаще, что увеличит количество потенциальных клиентов и продажи.
Написано в соавторстве с Питером Гейшекером и Аланной Моникаль и изначально размещено в Маркетинговом блоге The Geisheker Group.
Другие бизнес-статьи от Business 2 Community:
Создание эффектов наведения кнопок CSS3
CSS3 «hover» — это псевдокласс, который позволяет вам выбирать и стилизовать элементы на веб-странице при наведении указателя мыши на элемент.Вы можете использовать таблицы стилей Javascript или CSS, чтобы отреагировать на это событие в зависимости от вашей цели.
Например:
кнопка. Касса
{
цвет фона: синий;
}
button.checkout: наведите указатель мыши
{
цвет фона: зеленый;
}
Приведенный выше код CSS стилизует кнопку с классом checkout. Цвет кнопки по умолчанию синий, и когда мышь находится над кнопкой, цвет меняется на зеленый.
Использование
Этот эффект можно использовать очень изобретательно.Допустим, вы хотите убедить гостя на своем веб-сайте подписаться на информационный бюллетень, который вы рассылаете каждый месяц. Вы стратегически разместили большую синюю кнопку с текстом «Новичок на этом сайте?» . Когда гость нажимает кнопку, волшебным образом появляется форма регистрации.
Шаги по реализации эффекта наведения
Создайте свою веб-страницу
CSS3 эффект наведения
CSS3 в действии
Добавьте большую синюю кнопку действия сразу под элементом h2
Создайте стиль для большой кнопки, добавив таблицу стилей
Таблицы стилей
могут быть внутренними или внешними.Поскольку мы создаем простую веб-страницу, в этом руководстве будет использоваться первый вариант. Добавьте внутреннюю таблицу стилей сразу после тега заголовка.
Определите и выберите элемент, который вызовет эффект наведения
Существует несколько способов идентификации веб-элементов на странице, включая добавление класса, уникального идентификатора или просто по тегам. В нашем случае мы будем использовать метод id, поскольку он более точен. Добавьте идентификатор в элемент кнопки.
Стиль пуговицы
Когда страница загружается, кнопка будет иметь синий фон, а текст — белый.
кузов {
отступ слева: 100 пикселей;
}
input # go {
цвет фона: # 4c9ed9;
цвет: #ffffff;
отступ: 20 пикселей 40 пикселей
}
Стиль заполнения добавляет немного свободного пространства внутри кнопки, чтобы она выглядела большой.
Добавьте эффект наведения чуть ниже уже существующего стиля, чтобы у вас было 3 стиля
Мы хотим изменить цвет фона с синего на белый и текст с белого на синий, когда пользователь наводит курсор на кнопку.
input # go: hover {
цвет фона: #ffffff;
цвет: # 4c9ed9
}
Сохраните страницу как mainpage.html
Вот как должен выглядеть скрипт на данный момент.
CSS3 эффект наведения
<стиль>
тело {
отступ слева: 100 пикселей;
}
input # go {
цвет фона: # 4c9ed9;
цвет: #ffffff;
отступ: 20 пикселей 40 пикселей;
граница: 1px solid # 111;
}
input # go: hover {
цвет фона: #ffffff;
цвет: # 4c9ed9;
граница: 1px solid # 111;
}
CSS3 в действии
Демо
Наведите указатель мыши на кнопку
Вы должны увидеть изменение цвета фона и текста.Обратите внимание, что изменение цвета меняется на противоположное, как только мышь выходит за пределы области кнопки. Эффект наведения — это временное событие, которое длится, пока указатель мыши остается внутри стилизованного элемента.
Эффект наведения не может работать на мобильных устройствах, так как он в основном работает с мышью. Для мобильных пользователей вы можете рассмотреть альтернативу. Кроме того, как мы уже упоминали, Javascript также может реагировать на событие зависания, предоставляя вам альтернативный путь для вывода на ваш сайт действительно интересных скрытых сокровищ.
Коллекции эффектов наведения кнопок
Коллекция 1
источник
Коллекция 2
Цвет текста и фона — CKEditor 4 Documentation
Оглавление
- Дополнительные параметры цветов и диалоговое окно цветов
- Список настраиваемых цветов
- Определение стиля настраиваемых цветов
- История цветов
- Предложения цветов
- Сохранение выбранных цветов
- Демонстрация цвета текста и фона
- Связанные функции
Дополнительный плагин Color Button предоставляет возможность определять цвет шрифта и фона для текста, созданного в CKEditor 4.Когда он включен, он добавляет кнопки панели инструментов Цвет текста и Цвет фона , которые открывают раскрывающийся список выбора цвета. Если вы хотите быстро удалить цвета из документа, используйте кнопку Удалить формат , предоставляемую подключаемым модулем «Удалить формат».
Параметры дополнительных цветов и диалоговое окно цветов
Вы также можете добавить дополнительный плагин Color Dialog, который расширяет возможности выбора цвета с помощью опции More Colors и удобного способа выбора желаемого цвета в специальном диалоговом окне Select Color .Когда этот плагин включен, опция More Colors появляется автоматически для цвета текста и фона.
Вы можете скрыть функцию More Colors , установив для параметра конфигурации config.colorButton_enableMore значение false .
Список настраиваемых цветов
Список цветов, доступных в селекторах цветов, можно настроить, например, чтобы включить цвета, которые используются на вашем веб-сайте. Вы также можете ограничить выбор цветов пользователем несколькими выбранными цветами, чтобы избежать чрезмерного использования цветов.
Используйте параметр конфигурации config.colorButton_colors , чтобы определить настраиваемый список, доступный в функциях Цвет текста и Цвет фона . Например:
config.colorButton_colors = 'CF5D4E, 454545, FFF, DDD, CCEAEE, 66AB16';
Кроме того, начиная с CKEditor 4.5.8, вы также можете отключить параметр «Автоматически», установив для параметра config.colorButton_enableAutomatic значение false .
конфиг.colorButton_enableAutomatic = false;
Эти настройки приведут к тому, что список цветов будет содержать только шесть цветов, перечисленных выше, без опции «Автоматически»:
Функция Text and Background Color не создает семантически значимого содержимого. Даже если вы настроите список цветов в соответствии со стилем своего веб-сайта, ваши пользователи смогут произвольно применять цвета к текстовым элементам без какой-либо согласованности.
Намного лучшая идея для создания семантического контента и поддержания согласованного стиля на вашем веб-сайте — это настроить раскрывающийся список Styles , чтобы включить некоторые цвета, которые могут быть применены к пользовательскому контенту и будут соответствовать дизайну вашего веб-сайта.
Определение пользовательского стиля цвета
Вы также можете решить, как будет храниться определение цвета, установив параметры конфигурации config.colorButton_foreStyle (для цвета текста) и config.colorButton_backStyle (для цвета фона). По умолчанию цвет добавляется как элемент с атрибутом стиля , но вы также можете, например, использовать устаревшее (и не рекомендуется) определение элемента HTML4 :
конфиг.colorButton_foreStyle = {
элемент: 'шрифт',
атрибуты: {'цвет': '# (цвет)'}
};
config.colorButton_backStyle = {
элемент: 'шрифт',
стили: {'background-color': '# (color)'}
};
CKEditor 4 затем выведет определение цвета как элементы с атрибутами color и style = "background-color" для текста и цвета фона соответственно:
Это мой цвет текста.
Это мой цвет фона
CKEditor 4.15 представил свойство colorName , которое использует имя цвета вместо цветового кода, что позволяет создавать описательные имена классов.
Вы можете использовать colorName с параметрами конфигурации config.colorButton_foreStyle или config.colorButton_backStyle :
config.colorButton_foreStyle = {
элемент: 'промежуток',
атрибуты: {'class': 'text - # (colorName)'}
};
config.colorButton_backStyle = {
элемент: 'промежуток',
атрибуты: {'class': 'text - # (colorName)'}
};
CKEditor 4 затем выведет определение цвета как элемент с классом, например:
Текст
Вы можете настроить названия цветов в более удобном для пользователя виде, установив собственные названия цветов:
config.colorButton_colors = 'skyblue / 87CEEB, малиновый / DC143C';
История цветов
CKEditor 4.15 представила новую функцию: История цветов . По умолчанию он активен в редакторе, если включен плагин Color Button. Он добавляет дополнительные цветовые строки на цветовую панель, отделенные от палитры по умолчанию горизонтальной линией. Строки истории цветов видны только в том случае, если в истории есть несколько цветов:
Количество цветов, отображаемых на панели, можно контролировать с помощью параметра конфигурации config.colorButton_historyRowLimit .Установка этого значения на 0 позволяет полностью отключить эту функцию.
Фактически, функция истории цвета состоит из двух отдельных механизмов для сбора и отображения цветов. Первый собирает цвета из содержимого редактора во время инициализации, а второй динамически добавляет их в историю всякий раз, когда они используются.
Предложения по цвету
Во время инициализации редактора история цветов сканирует содержимое редактора на предмет всех цветов, используемых в качестве стилей текста и фона, и добавляет их в строки истории цветов на панели цветов.Порядок цветов определяется на основе количества их вхождений (тот, который появляется чаще всего, будет отображаться как первый), а затем в порядке появления. Вся эта процедура происходит только один раз во время инициализации редактора, поэтому, если редактор загружен с цветным содержимым, вы можете сразу использовать все цвета! Эту часть функции также можно отключить с помощью параметра config.colorButton_renderContentColors .
Сохранение выбранных цветов
Каждый раз, когда используется цвет (из цветовой палитры по умолчанию или из цветового диалогового окна), он добавляется в начало строки истории цветов:
Последний использованный цвет всегда добавляется в начало.Если цвет уже присутствовал в истории, он просто перемещается на первую позицию. Цвет текста и фона отслеживается отдельно на соответствующих цветных панелях.
Как упоминалось ранее, некоторые цвета уже могут быть в истории, даже если вы еще не выбрали ни одного, благодаря функции цветовых предложений. Количество цветов, сохраняемых в истории, можно контролировать с помощью параметра конфигурации config.colorButton_historyRowLimit .
Демонстрация цвета текста и фона
См. Рабочий пример «Установка цвета текста и фона», в котором демонстрируется использование и настройка функций цвета текста и фона.
Дополнительные сведения о стилях и форматировании текста см. В следующих ресурсах:
Согласно исследованиям, какой цвет кнопки призыва к действию является лучшим?
Каждый интернет-маркетолог согласится с тем, что ключом к успеху является конверсия: большее количество людей, нажимающих на ваши кнопки «Подписаться» или «Купить сейчас» , означает больше потенциальных клиентов и продаж. Но когда дело доходит до выбора цвета кнопок, это очень обсуждаемая тема.Могут ли определенные цвета повысить коэффициент конверсии? В этой статье мы рассмотрим, что, по мнению исследователей, является лучшим цветом кнопки призыва к действию.
Что говорят эксперты по конверсии?
Возможно, вы слышали много противоречивых советов по оптимизации конверсии, особенно когда речь идет о цвете.
Конечно, все мы знаем, что срочность, социальное обоснование, понятный дизайн и правильный лид-магнит могут помочь конверсиям.
Но цвет? Это непростой вопрос.
Вы могли встретить практикующих, которые утверждали, что они нашли «секрет» эффективной оптимизации.Как правило, вы увидите этих людей, принадлежащих к одному из трех лагерей:
- Генерализаторы. Оптимизатор коэффициента конверсии этого типа будет строго придерживаться общих передовых практик. Однако они не будут углубляться в психологию своих клиентов, чтобы настроить свои кампании.
- Голубиные охотники. Этот второй тип придерживается очень специфических стратегий. Они скажут вам, что есть определенные «секреты», которые гарантированно увеличат вашу конверсию.Они скажут вам, что определенный цвет, шрифт или макет — залог вашего успеха.
- Бесконечные тестеры. Третий тип не придерживается какой-либо стратегии. Эти оптимизаторы достаточно экспериментировали, чтобы понять, что некоторые стратегии не обязательно работают для всех. Вместо этого они скажут вам тестировать разные вещи, почти наугад, пока вы не найдете что-то, что работает.
Когда вы сталкиваетесь с вопросом о том, какой цвет кнопки призыва к действию лучше всего, у каждого лагеря будет свой ответ…
- Генерализаторы скажут вам, что есть некоторые общие истины о цвете.Некоторые цвета хорошо подходят для определенных отраслей, а есть цвета, которые вам никогда не следует использовать.
- Голубиные охотники предпочитают один цвет, который преобразуется лучше, чем любой другой.
- Бесконечные тестеры скажут, что цвет может иметь значение, но непостоянным или предсказуемым образом.
Ясно, что не все могут быть правы.
Возможно, цвет не играет значительной роли в конверсиях, как мы думали. Или, может быть, здесь происходит что-то более тонкое?
Имеет ли значение цвет CTA?
Психологически нет никаких сомнений в том, что цвет может оказывать сильное влияние на людей.
Например, цвет комнаты может повлиять на ваше настроение. Было показано, что красный цвет повышает кровяное давление, увеличивает скорость дыхания и учащает сердцебиение. С другой стороны, синий имеет противоположный эффект: он снижает артериальное давление, замедляет дыхание и снижает частоту сердечных сокращений.
В одном исследовании, проведенном учеными из Университета Британской Колумбии, было показано, что синий цвет улучшает творческие способности, тогда как красный улучшает память и внимание к деталям.
На основании этих результатов кажется, что маркетологи должны иметь возможность использовать «психологию цвета» для создания более убедительных логотипов и материалов для брендинга.
И многие маркетологи действительно пытались это сделать.
На самом деле, вы, вероятно, видели раньше хотя бы одну подобную инфографику:
Приведенная выше инфографика от The Logo Company пытается показать четкую взаимосвязь между цветом и психологическим влиянием, которое цвет оказывает на то, как мы воспринимаем бренд.
Рестораны, например, пытались использовать красный цвет, чтобы пробудить чувство голода.
Однако многие психологические отчеты о влиянии цвета дают неоднозначные результаты…
Например, действительно ли красный цвет стимулирует аппетит? Фактические исследования показывают, что красный цвет на самом деле подавляет аппетит у людей и имеет тенденцию подавлять поведение в целом, что-то вроде знака «стоп».Однако красный действительно стимулирует кормление рыб нильской тилапии.
В исследовании результатов олимпийским борцам случайным образом давали синюю или красную форму. Борцы в красной форме значительно превзошли своих соперников в синей форме, что указывает на то, что красный цвет может сделать вас более агрессивным или более конкурентоспособным.
Но в другом исследовании, проведенном в академической среде, наличие красного цвета фактически снижает производительность .
Все эти результаты предполагают, что красный цвет может сделать вас «победителем» или «проигравшим» (или «голодным» или «не голодным»), в зависимости от контекста (и в зависимости от того, человек вы или рыба).
Этот контекст становится только более сложным, если вы посмотрите на культурные значения, связанные с цветом…
Возьмем, к примеру, черный и белый цвета.
В западной культуре черный цвет символизирует похороны, смерть и траур. Белый цвет ассоциируется с невестами, свадьбами и чистотой.
Но в Китае все наоборот: белый цвет — символ смерти и траура. Черный — цвет для мальчиков.
Даже если вы включите в уравнение что-то столь же произвольное, как пол, оно станет более сложным…
В исследовании Джо Хэллока было установлено, что мужчины и женщины предпочитают разные цвета следующим образом:
Итак, как маркетологи должны понимать все это? Как вы можете использовать психологическое воздействие цвета, чтобы побудить людей покупать больше ваших вещей?
Создание контекста
Теоретически может показаться возможным выбрать «идеальный» цвет: тот, который культурно и демографически соответствует вашей личности покупателя и контекстуально соответствует вашему бренду.
Проблема в том, что нет четкого способа это доказать.
Допустим, вы изменили цвет призыва к действию с синего на красный и заметили рост конверсий. Означает ли это, что красный цвет конвертируется лучше, чем синий?
Не обязательно.
Видите ли, здесь дело не только в цвете самой кнопки.
Переменные включают не только ваш бренд и вашу аудиторию, но и окружающий дизайн. Практически невозможно выделить все переменные и окончательно доказать, какой цвет преобразуется лучше всего.
Скажем по-другому. В лучшем случае было бы непрактично сначала попытаться понять, как ваш покупатель реагирует на цвет, а затем разработать на его основе стратегию преобразования на основе цвета. Было бы очень трудно, если не невозможно, закрепить. Вы бы потратили меньше усилий и увидели похожие результаты, если бы просто пробовали разные цвета по одному, пока не нашли один, который превосходит другие.
Но это не то, что мы предлагаем вам делать. Есть гораздо лучший способ решить эту проблему с цветом, не бросая что-то в стену и не смотреть, что прилипает.
Что мы знаем о цвете кнопки с призывом к действию
Если вы не знаете, как использовать цвет на своем веб-сайте, не волнуйтесь — вы не одиноки. Маркетологи десятилетиями пытались взломать «цветовой код».
Итак, вместо того, чтобы сосредотачиваться на том, чего мы не знаем, давайте сосредоточимся на том, что мы делаем знаем…
Ваш CTA-цвет должен стать популярным
Мы знаем, что более заметный и привлекательный призыв к действию приводит к большему количеству конверсий.Следовательно, любое изменение цвета, которое увеличивает видимость вашего призыва к действию, должно увеличивать количество конверсий.
Если, например, цвет вашей кнопки мало контрастирует с цветом фона, видимость будет плохой.
Но увеличьте контраст между цветом кнопки и цветом фона, и бум! Ваши конверсии вырастут.
Не требуется понимание контекста или психологических оснований.
Вот пример отличной кнопки CTA с высокой контрастностью:
(Изображение предоставлено Dribble.Другой фактор, который следует учитывать, — это общая цветовая схема вашей страницы. Если на вашей странице доминирует один цвет, и этот цвет также используется для вашего призыва к действию, он не будет выделяться. Чтобы сделать ваш призыв к действию действительно ярким, снова выберите контрастный цвет.
В одном тесте HubSpot обнаружил, что красные кнопки работают лучше, чем зеленые. Вполне возможно, что красный цвет конвертировался лучше, чем зеленый, потому что зеленый был доминирующим цветом на странице. Таким образом, красный создает больший контраст:
Чтобы получить максимальную контрастность, выберите дополнительный цвет : тот, который противоположен вашему доминирующему цвету на цветовом круге.
Еще один высококонтрастный цвет — это триадный цвет : цвет, который составляет треть длины цветового круга от вашего доминирующего цвета.
Ваши цвета должны соответствовать марке
Из исследований мы также знаем, что люди по-разному воспринимают цвета в зависимости от того, насколько хорошо эти цвета «соответствуют» вашему бренду.
Независимо от того, привлекает ли ваш бренд индивидуальность вашего бренда или нет, и помогают ли ваши цвета воспринимаемой индивидуальности вашего бренда или вредит ли это, на самом деле влияет на решения о покупке.
Например, допустим, ваш бренд жесткий, суровый и мужественный… как Harley Davidson. А теперь представьте, если бы они использовали розовые кнопки с призывом к действию вместо большой оранжевой кнопки. Это не совсем сработает, не так ли?
Полный ответ, конечно, таков, что это зависит от вашей целевой аудитории. ?
Ваши цвета должны быть одинаковыми
Еще одна вещь, которую маркетологи знают о цветах, — это то, что мы можем контролировать значение, которое наши пользователи связывают с ними.
Помните те исследования, о которых мы упоминали ранее? Как красный цвет может иметь совершенно разное влияние в зависимости от контекста? Логическая причина в том, что из этого контекста создается ассоциация .
Например, синий — наиболее часто используемый цвет для гиперссылок. Поэтому у большинства людей синий цвет ассоциируется с гиперссылками. Они знают, что если текст на странице синий, вы, вероятно, можете щелкнуть по нему.
То же самое и с кнопками с призывом к действию.Вам не нужно выбирать синий цвет, но имейте в виду, что любой цвет, который вы назначаете кнопке, теперь будет связан с действием. Используйте это в своих интересах, постоянно используя этот цвет для всех призывов к действию на вашем сайте.
Не вводите пользователей в заблуждение, используя один и тот же цвет для элементов, не связанных с действием, например заголовков, на которые невозможно нажать.
Точно так же не вводите пользователей в заблуждение, используя на одной странице много разных цветов призыва к действию.
OptinMonster постоянно использует зеленый цвет для всех своих основных кнопок призыва к действию.Менее важные кнопки (например, кнопка «Подписаться» в нижнем колонтитуле) имеют низкоконтрастный синий цвет. Таким образом, совершенно ясно, что должен делать пользователь: нажмите кнопку «Получить OptinMonster сейчас».
Согласованность создает хорошее впечатление для пользователей веб-сайта, что имеет решающее значение для оптимизации коэффициента конверсии.
Итог по цвету
Практически невозможно доказать, что какой-то один цвет лучше любого другого для убеждения аудитории. Слишком много переменных и слишком много противоречивых свидетельств, чтобы прийти к какому-либо универсальному выводу.
Поэтому вместо того, чтобы пытаться найти «идеальный» цвет, выберите цвет, который увеличивает заметность вашего призыва к действию. Используя этот простой и проверенный подход, вы можете практически гарантировать увеличение конверсии.
Если вы ищете надежный способ повысить коэффициент конверсии, вам подойдет такое практическое решение, как OptinMonster. Вместо того, чтобы гадать в темноте, OptinMonster поможет вам улучшить показатели конверсии с помощью более четкой аналитики и простого сплит-тестирования A / B.Нажмите здесь, чтобы попробовать OptinMonster и значительно увеличить количество конверсий на вашем сайте.
Итак, какой цвет кнопки призыва к действию вам больше всего подходит? Вы пробовали использовать разные цвета на своем сайте? Дайте нам знать об этом в комментариях!
Опубликовано Мэри Фернандес
Мэри Фернандес — профессиональный блоггер. Когда ее нет за столом, Мэри обычно исследует солнечный Сан-Диего, штат Калифорния, со своим ноутбуком, мужем и тремя детьми на буксире.
Кнопка | Webflow University
В этом видео используется старый интерфейс.Скоро выйдет обновленная версия!
Кнопка служит вашим призывом к действию (CTA) и ссылками на страницы, формы, ресурсы и многое другое.
В этом уроке:
- Основные сведения о кнопках
- Состояния кнопок
- Анимированные переходы
- Несколько кнопок
- Пользовательские блоки ссылок
Основные сведения о кнопках
Вы можете добавить кнопку из Добавить панель (A)> вкладка Элементы > Основной раздел .Отредактируйте текст кнопки, дважды щелкнув кнопку или выбрав кнопку и нажав Введите .
Чтобы добавить цвет фона, щелкните панель «Стиль» справа, прокрутите до Фон и выберите цвет в палитре цветов.
Шрифт кнопки и все стили оформления унаследованы от тега Body (All Pages) . Чтобы внести изменения, перейдите в тег Body (All Pages) на панели Style , чтобы установить и переопределить типографические параметры по умолчанию.
Когда вы вносите изменения в новый элемент, автоматически создается класс. Классы позволяют управлять стилями и переопределять их. Чтобы повторно использовать стиль, щелкните метку класса и переименуйте его.
Размер кнопки определяется текстом внутри (длина текста, размер шрифта, высота строки) и отступом (пробел внутри кнопки).
Чтобы переопределить значения заполнения по умолчанию, на панели стиля в разделе Интервал > Отступ , удерживайте Option (на Mac) или Alt (в Windows) , затем щелкните и перетащите курсор.Это отрегулирует оба значения заполнения одновременно (либо по бокам, либо сверху и снизу).
Вы можете настроить размер кнопки, изменив ее Ширина и Высота на панели стиля на Размер .
Кнопка может ссылаться на URL-адрес, внутреннюю или внешнюю страницу, раздел страницы, загрузку файла, а также может запускать электронное письмо или телефонный звонок.
Вы можете либо щелкнуть значок шестеренки на элементе кнопки на холсте, либо открыть панель настроек справа, чтобы настроить параметры кнопки.
Подробнее о настройках ссылок.
Состояния кнопок
Если вы щелкните поле Selector на панели Style , вы увидите все состояния кнопок. По умолчанию на кнопке нет стиля наведения курсора. Вы можете щелкнуть состояние Hover в раскрывающемся списке, чтобы изменить внешний вид кнопки при наведении на нее курсора.
Здесь вы также можете установить цвет фона, который будет изменяться при наведении курсора. Если вы добавите свой выбор цвета в качестве глобального образца, вы можете повторно использовать его в своем проекте.
Вы можете установить любой из других стилей при наведении курсора под Эффекты , например, добавив преобразование. Выберите, например, Move , чтобы кнопка двигалась при наведении курсора.
Подробнее о:
Чтобы поиграть с другими свойствами кнопки, переключитесь из состояния Hover на None в раскрывающемся меню обратно в Selector . Вы можете сделать такие вещи, как скругление углов, изменив Radius в разделе Borders .
Чтобы добавить тень к вашей кнопке, перейдите в раздел Effects на панели Style , щелкните значок плюса рядом с Box shadows, и настройте параметры (например, смягчите Blur на установив его на 20 пикселей и установите Угол на 180). Так как это не состояние наведения, вы можете установить для параметров Distance и Color , opacity значение 0. Позже мы добавим тень блока, которая смещает эти значения и делает эффект наведения более драматичным.
Теперь, когда вы снова переходите в состояние Hover , вы можете изменить ту же тень, которую вы только что создали (настроить ее, чтобы она изменялась при наведении). Вы можете увеличить непрозрачность (например, установить непрозрачность до 20%) и изменить расстояние (например, до 3 пикселей).
Вернитесь в состояние Нет , чтобы проверить, как ваша кнопка работает при наведении курсора.
Подробнее об использовании теней блока.
Анимированные переходы
Анимированный переход делает перемещение между состоянием «нет» и состоянием наведения более плавным.
Чтобы добавить переход, убедитесь, что вы находитесь в состоянии None (всегда добавляйте переходы из состояния None) на панели Style. В разделе «Эффекты » щелкните значок «плюс» рядом с полем «Переходы ». Щелкните в меню рядом с Тип и выберите Цвет фона . По умолчанию установлена длительность 200, что означает переход более 200 миллисекунд. Наведите курсор на кнопку, чтобы проверить это.
Чтобы анимировать тень, примените переход к свойству Box shadow и измените кривую плавности.По умолчанию используется «легкость», но вы можете попробовать более драматичное начало и более постепенное окончание («круговое замедление» — хороший выбор). Поскольку начало настолько драматично, вы можете увеличить время до 1000 мс.
Наведите курсор, чтобы просмотреть свою работу.
Вы всегда можете нажать Escape (на Mac и Windows), чтобы отменить выбор элемента, но граница элемента (синий контур при наведении курсора для проверки) может отвлекать. Рядом со значками точек останова вы можете выбрать Скрыть края элементов.
Чтобы переместить кнопку при наведении, вернитесь в состояние Hover в Selector на панели Style, в разделе Effects щелкните значок плюса рядом с 2D & 3D Transforms . Добавьте значение вашего хода (например, 3PX вверх).
Также можно добавить переход преобразования. Вернитесь в состояние Нет для вашей кнопки. Прокрутите вниз до раздела «Эффекты» и снова щелкните значок «плюс» рядом с полем « Transforms ».Рядом с Type, выберите Transform из меню и измените Easing (например, на «круговое замедление») и Duration (например, на 1000 MS).
Оцените свою работу в режиме предварительного просмотра.
Несколько кнопок
Чтобы разместить несколько кнопок рядом друг с другом, скопируйте и вставьте первую кнопку. Удерживая клавишу Alt при перетаскивании стрелок полей, вы создадите пространство с обеих сторон кнопки и сохраните ее выравнивание по центру. Помните, что изменения стиля, которые вы вносите в любую кнопку с этим классом, повлияют на все кнопки с этим классом.
Вместо добавления специального класса к кнопкам в разделе вашего героя вы можете добавить блок div, назвать его (например, оболочка кнопок) и перетащить каждую кнопку внутрь. Это позволяет вам управлять одним классом кнопок и устанавливать отрицательное поле для идеального выравнивания.
Это работает со всем — вы можете использовать оболочку кнопки (с отрицательным полем), чтобы сместить любое симметричное поле, которое вы установили на кнопках в любом месте. Вам не придется управлять разными группами кнопок только потому, что их выравнивание отличается.
Пользовательские блоки ссылок
Блок ссылок похож на блок div — это поле, в которое мы можем помещать элементы. Перетащите блок Link на холст с панели Add под Basic и назовите его, чтобы применить класс.
Из панели Добавить под Typography перетащите блок текста на холст внутри блока Link и дважды щелкните, чтобы отредактировать текст. Чтобы избавиться от подчеркивания, щелкните X рядом с Style в разделе Typography на панели Style .Вы можете изменить цвет ссылки на этой же панели.
Вы можете добавить значок (например, стрелку), перетащив его прямо внутри блока ссылок. Если вы используете панель стилей для ввода значения вместо того, чтобы щелкать и перетаскивать угол для изменения размера значка, автоматически созданный класс позволит вам изменять размер стрелки каждый раз, когда вы повторно используете этот блок ссылок в вашем проекте.
Чтобы выровнять значок внутри кнопки, измените настройки на панели Style в разделе Layout (e.грамм. Display : center, Align : center) и отрегулируйте поля до Spacing .
И поскольку вы добавили гибкость в класс основной кнопки, ваши две кнопки наверху займут всю ширину блока div оболочки Button.