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

21.04.2021 alexxlab

Содержание

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

Вы здесь: Главная — 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]

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

202

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (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 г.

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

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

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

Замена кнопки submit в форме html

Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения. Наглядно видно, что вторая кнопка смотрится лучше.

Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

<input type=»submit» name=»submit» value=»Оплатить» />

А вот и css:

.superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

Украшаем:
Для украшения можно предложить изменять цвет фона кнопки при наведении. Как правило дизайнеры советуют менять цвет не кардинально, а всего лишь на тон светлее или темнее. Я при выполнении задачи предпочел затемнить кнопку. Для этого в css добавляем:

.superbutton:hover{
background:#358DE5;
}

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

Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

. superbutton:focus{
outline:none;
}

Please enable JavaScript to view the comments powered by Disqus.

Html КАК ИЗМЕНИТЬ ЦВЕТ КНОПКИ видео онлайн

Видео:

<center><ins class="lazy lazy-hidden adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>

Привет друзья! В этом видео я вам расскажу, как изменить цвет текста в HTML, вы увидите как поменять цвет вс

В уроке задействуем #псевдоэлементы #before и #after, для #анимированного появления используем #transition, а при …

Привет друзья! Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или тек

Помощь проекту: WMR: R288272666982 WMZ: Z293550531456 Яндекс.Деньги: 410011531129223 Блог: …

• Скидка 10% на платные тарифы по промокоду: SKIDKA10 • 7 дней полного доступа по промокоду: SUPER7 Добавляйтесь

In this video you’ll going to learn how to create different kind of buttons in Android Studio. My Courses: …

Помощь проекту: WMR: R288272666982 WMZ: Z293550531456 Яндекс.Деньги: 410011531129223 Блог: …

Как установить цвет фона в HTML (теги цветов фона HTML). Статью см. здесь: …

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

Приветствую. Сегодня мы будем разбираться, как делается стилизация Checkbox и стилизация radio css. это такие …

Записаться на конференцию по брендингу: Как вставить код формы подписки Mailchimp на …

Хочешь сделать красивую кнопку с анимацией на CSS HTML? Я расскажу и покажу как это сделать! В туториале я …

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

Enroll My Course : Next Level CSS Animation and Hover Effects …

Помощь проекту: WMR: R288272666982 WMZ: Z293550531456 Яндекс.Деньги: 410011531129223 Блог: …

Мы продолжаем рубрику CSS-фичи! Сегодня мы узнаем, как сделать свою radio кнопку или кнопку чекбокс (checkbox input

Статьи Сары Суайдан — — Курс «Оформление SVG-фигур» …

Тильда. Крутые переходы между блоками в тильде. Tilda publishing, zero block. Предлагаю вашему вниманию три классных

Почему у кнопки «Отмена» никогда не должно быть цвета

Что именно делает кнопка «Отмена»?

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

Кнопка «Отмена» должна символизировать возвращение к безопасному состоянию, а не призыв к действию. Другими словами, ваша кнопка “Отмена” никогда не должна быть цветной.

Нейтральный цвет для нейтральной кнопки

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

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

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

У «Отмены» много имен

Не все кнопки отмены имеют надпись «Отмена», но все они функционируют одинаково. Например, кнопка «Отмена» может иметь надпись «Не сейчас», «Нет, спасибо», «Может быть позже» или «Пропустить», в зависимости от контекста. Если кнопка отменяет какое-либо действие, рассматривайте ее как кнопку «Отмена», поскольку она выполняет ту же функцию.

Чем больше кнопок на экране, тем более необходима отмена. Когда все кнопки имеют цвет, выход из ситуации непонятен. Но когда кнопка “Отмена” имеет нейтральный цвет, она делает выбор более интуитивным.

Достаточно серый

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

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

Сделать кнопку отмены нейтральной

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

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

17 лекций о разработке интерфейсов Школы разработки интерфейсов Яндекса

Источник

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Создание кнопок, оформление текста и картинок, а также добавление отзывчивых классов в Bootstrap 3

Главная / Как устроены сайты / Сайты на Bootstrap

20 января 2021

Стилевое оформление текста
Отзывчивые классы в Бутстрап 3 (hidden и visible)
Создание и оформление кнопок
Как поменять цвет кнопок в файле собственных стилей
Добавляем картинкам отзывчивость и другие стили Bootstrap

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это уже четвертая статья в данной рубрике:

В первой мы познакомились с основами отзывчивого дизайна и в подробностях изучили вопрос подключения фреймворка Бутстрам к Html страничкам (веб-документам).
Во второй статье мы в подробностях и на конкретных примерах рассмотрели устройство и работу сеточной системы в Bootstrap 3 (она существенно отличается от предыдущих версий этого фреймворка).
Ну, а в третьей статье мы узнали про ряд приемов верстки сайта на Бутстрап, которые могут пригодиться вам в дальнейшем.

Сегодня же мы поговорим про возможности стилевого оформления текста средствами Бутстрапа и про использование отзывчивых классов, позволяющих скрывать или показывать элементы веб-страницы при изменении ширины экрана. Также мы посмотрим, как средствами этого фреймворка можно создавать кнопки и как их можно настраивать. Ну и в самом конце мы посмотрим, как в Bootstrap 3 сделать картинки отзывчивыми (меняющими размер при изменении ширины экрана) и какие классы к ним можно добавить для дополнительной стилизации.

Стилевое оформление текста и отзывчивые классы в Bootstrap

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

Начнем с типографики, или же другими словами — оформления текста. Из приведенных на официальной странице фреймворка данных вы поймете, как будут оформлены теги заголовков от h2 до H6, еще узнаете, что размер шрифта по умолчанию на сайте будет равен 14 пикселям, а высота строк будет браться равной 20 пикселям. Ну, а при использовании тега абзаца «P» будет задаваться внизу отступ высотой в полстроки.

Чтобы чего-то поменять используются классы. Например, довольно часто первый абзац в тексте статьи набирают более крупным шрифтом, чтобы повысить вероятность прочтения его посетителями и вовлечения их в дальнейшее знакомство с материалами. В Бутстрапе для реализации этого будет достаточно в тег «P» добавить класс со значением LEAD — class="lead".

В приведенном примере я просто добавил в тег выделенного абзаца данный класс:

<p>

Этот скриншот и все последующие я буду снимать с уже созданного нами в предыдущих статьях макета некой вебстраницы. Вам нужно будет лишь скопировать файлик sait-4.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как…»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

В плане форматирования текста Бутстрап очень похож на классический язык Html, он позволяет, например, делать следующие вещи:

Код этого фрагмента в Html файлике подключенном к Bootstrap 3 при этом выглядит так:

<ol>
	<li><code>Выделение кода в тексте с помощью тегов <code>&lt;code&gt;</code></code></li>

	<li><mark>Подсветка фрагмента текста с помощью окружения его открывающим и закрывающим тегами <code>&lt;mark&gt;</code></mark></li>
<li>	<s>Перечеркнутый текст с помощью окружения его тегами <code>&lt;del&gt;</code> либо <code>&lt;s&gt;</code> </s></li>
<li>	<u>Подчеркнутый текст с помощью окружения его тегами <code>&lt;ins&gt;</code> либо <code>&lt;u&gt;</code> </u></li>
<li><small>Уменьшение шрифта выделенного фрагмента текста с помощью его окружения тегами <code>&lt;small&gt;</code></small>	</li>
<li>Выделение <strong>жирным</strong> и <em>курсивом</em> с помощью <code>&lt;strong&gt;</code> и <code>&lt;em&gt;</code></li>
<li>Выравнивание текста в контейнере, например, по правому краю - с помощью добавления класса <code>text-right</code></li>
<li>Или по центру - с помощью добавления класса <code>text-center</code></li>
<li><blockquote>Оформление цитат с помощью тегов <code>&lt;blockquote&gt;</code></blockquote></li>
<li><blockquote>Реверсирование выравнивания текста в цитатах - с помощью добавление в тег <code>&lt;blockquote&gt;</code> класса <code><code>blockquote-reverse</code></code></blockquote></li>
	</ol>

Все остальное вы можете изучить самостоятельно на вкладке «Typography»

Отзывчивые классы в Бутстрап 3 (hidden и visible) — для чего их можно использовать?

В приведенном выше файле sait-4.html уже настроены сеточные системы, которые изменяют положение блоков с контентом нужным образом при изменении ширины экрана или окна браузера. Однако, может возникнуть ситуация, когда при просмотре страницы на малых экранах некоторые элементы дизайна окажутся лишними (совсем не актуальными, например, на смартфоне). Что я имею в виду?

В приведенном файле sait-4.html в верхней строке (напомню, что строки в Bootstrap образуются с помощью контейнеров с прописанных в них классами class="row") у нас отображается заголовок и описание сайта, а также его логотип. Так вот, при уменьшении ширины экрана мы в конце концов получаем ситуацию, когда этот самый логотип размещается под заголовком, а уже потом следует содержательная часть страницы.

В принципе, было бы уместным логотип на малых устройствах убрать (особенно, если бы он был еще большего размера), ибо никакой смысловой нагрузки он не несет и несколько дезориентирует посетителя сайта, зашедшего на него с гаджета, размер экрана которого меньше 768 пикселей по ширине. Что можно сделать? Использовать обозначенные в заголовке отзывчивые классы hidden и visible.

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

Итак, для наглядности производимых действий перейдите на официальном сайте Bootstrap на вкладку «Responsive utilities» из левого меню, которое в свою очередь появляется при переходе по вкладке «CSS» из меню верхнего. Там вы увидите таблицу срабатывания указанных классов при различных размерах экранов, на которых будет просматриваться страница сайта:

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

Класс hidden как раз и позволит нам реализовать нашу задачу — спрятать элемент (логотип) при уменьшении разрешения экрана (окна браузера) ниже 768 пикселей по ширине. Т.е. нам нужно будет использовать класс hidden-xs исходя из приведенной таблицы. Как это сделать? Довольно просто. Найти в коде файла sait-4.html строку, где задается отображение картинки данного логотипа, и просто добавить в тег IMG класс class="hidden-xs":

В результате на низких разрешениях логотип будет просто пропадать, а не опускаться под заголовок сайта.

Что и требовалось реализовать. Про другие возможности использования отзывчивых классов я предлагаю вам подумать самим.

Создание кнопок с помощью классов btn в Бутстрап 3

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

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

В нашем многострадальном примере (файлик sait-4.html, который можно скачать чуть выше) есть элементы, которые так и напрашиваются, чтобы сделать их кнопками. Я говорю про ссылки «Читать далее», расположенные внизу каждого анонса.

Вообще, можно создать кнопку на основе двух элементов Html кода: button и обычной гиперссылки с тегом A. Мы будет использовать второй вариант.

Для создания кнопки нам лишь нужно будет добавить в тег A соответствующий класс. Сначала в этом классе прописывается класс btn (что само по себе никаких дополнительных свойств не придает ссылке), а уже потом дописывается один или несколько классов, задающих, например, цвет и размер кнопки (или их активность). Давайте посмотрим на примере.

Добавим к первой ссылке «Читать далее» класс дефолтной кнопки (умолчательной — class="btn btn-default"):

<a target="_blank" href="Урл">Читать далее</a>

В результате наша ссылка с успехом превратится в кнопку благодаря встроенным в Бутстрап стилям:

Классы для разных типов кнопок в Bootstrap вы можете взять из приведенных на официальном сайте примеров:

Создаваемые кнопочки реагируют на подведение к ним курсора изменением своего тона, что опять же делает работу с сайтом более понятной для посетителя (статичные кнопки могут немного озадачивать пользователя). Кнопка с дефолтным дизайном не слишком бросается в глаза, поэтому если требуется акцентирование внимания, то лучше использовать альтернативные стили (например, danger или warning). Ну и размер кнопочки можно под это дело увеличить простым добавлением класса btn-lg:

<a target="_blank" href="Урл">Читать далее</a>

Все очень просто и интуитивно понятно. По аналогии с сеточной системой, в Bootstrap имеется четыре основных размера для кнопок. Без прописывания дополнительных классов вы получите средний размер кнопочки, а при добавлении btn-lg, btn-sm и btn-xs получите большую, малую и сверхмалую кнопки, соответственно. Собственно, все довольно понятно из данного скриншота:

Кроме этого, размер кнопке в Бутстрапе можно задать равным ширине блока, в котором она заключена. Данная опция может быть довольно удобна при создании кнопочек в ширину всей колонки. Для этого достаточно будет дописать вместо класса размера класс btn-block:

<a target="_blank" href="Урл">Читать далее</a>

Как поменять цвет кнопок с помощью файла с собственными стилями?

Другой вопрос — а что, если из представленных цветов кнопок ничего не подходит под выбранное вами стилевое оформление сайта? Выход есть, и заключается он в самостоятельном добавлении недостающих вам CSS правил, но не в файл стилей Bootstrap 3 (чтобы не потерять внесенные изменения, например, при обновлении фреймворка), а в специально созданный и подключенный к вебстранице файлик manual.css с нашими собственными стилями (читайте об этом в первой статье, ссылку на которую вы найдете в самом верху этой публикации).

До сих пор файл manual.css оставался у нас пустым, вот и пришло время его задействовать на благо сайтостроения. Итак, что такое CSS селекторы помните? А про различные CSS свойства читали? Как и что задается, в какой последовательности и как браузер расставляет приоритеты? Если нет, то можете использовать десяток моих уроков (надеюсь максимально подробных и доступных) по нелегкому делу погружения в пучины стилевой разметки веб-страниц — Справочник по использованию CSS. Мы же продолжим, не сильно останавливаясь на подробностях использования стилей.

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

Как сейчас данные кнопки получают цвет? С помощью прописанных в тегах ссылок A классов Bootstrap 3. Например, в записи «btn btn-primary btn-block» за цвет отвечает btn-primary. Как мы уже обговорили ранее, в основном файле стилей мы менять ничего не будем, поэтому нам нужно будет дописать правило в наш файлик manual.css. Если мы хотим поменять цвет только этой кнопки, то CSS правило будет выглядеть так:

.btn-primary {
background-color: #cdae51;
border-color: #3F2B22;
color: #000000;
}

Таким образом мы задали цвет фона кнопки (background-color), цвет рамки вокруг нее (border-color) и цвет текста (color). В результате чего она действительно поменяет свой вид:

Если у вас изменений не видно, то проверьте подключение manual.css в вашем файлике sait-4.html — оно должно осуществляться после подключения основного файла Бутстрапа. Т.е. стоять ниже в коде:

Понимаете почему? Дело в том, что мы прописали сейчас CSS правило, которое дублирует такое же правило в основном файле стилей. Как же должен поступить браузер при возникновении подобного конфликта? Правильно, руководствоваться рейтингом приоритетов. Читайте об этом в статье «Приоритеты Css свойств (с important и без него)». Ну вот, а при равенстве приоритетов будет выполняться CSS правило, стоящее ниже в коде (то бишь в том файле стилей, который подключен последним). Хотя вы можете повысить приоритет свойств в файле manual.css с помощью добавления к ним !important:

.btn-primary {
 background-color: #cdae51 !important;
 border-color: #3F2B22 !important;
 color: #000000 !important;
}

Но это так, на всякий случай я рассказал — вдруг пригодится. Будем считать, что у вас без проблем получилось поменять цвет кнопки.

Да, кстати, еще один нюанс. Если вы хотите все кнопки на сайте унифицировать (маловероятно, но все же), то для этого просто замените в приведенном CSS правиле селектор .btn-primary на просто .btn. Вы уже наверное заметили, что везде к кнопкам добавляется отдельный класс btn, который как бы сам по себе ничего не меняет. Вот именно для применения каких-то стилевых свойств для всех кнопок на сайте этот самый класс и нужен. То же самое будет и при задании ряда других элементов веб-страницы с помощью Бутстрапа. Все продумано.

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

Правда, вот так за здорово живешь браузер вам ничего не скажет, но если его попытать с помощью Файербага (или встроенных в любой браузер инструментов для разработчиков, которые вызываются из меню правой кнопки мыши выбором пункта «Просмотр кода элемента» или ему подобного), то он выложит все как миленький. Ознакомиться с методами пытки браузера можно из приведенной статьи, а мы констатируем, что цвет кнопки при наведении задается в основном файле Bootstrap с помощью такого вот сборного селектора:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary

Собственно, мы тоже не будь дураками его и пропишем себе в файлик manual.css, а к нему и нужные CSS свойства добавим, задающие цвет текста, фона и рамки:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
 color: #ffffff;
 background-color: #3F2B22;
 border-color: #333;
}

В результате кнопка при наведении кардинально поменяет свой вид:

Дизайнер из меня, конечно же, никудышный, но вы цветовую схему сможете куда лучше подобрать. Таким образом, с помощью добавления CSS правил в manual.css, можно будет менять не только цвет кнопок, но и отступы от картинок, и цвета глиф-иконок (о них в следующей статье поговорим), а также и все остальное. Нужно только чутка подумать. Как говорится, флаг вам в руки, а барабан на шею.

Добавляем картинкам отзывчивость и другие стили Bootstrap

Несмотря на то, что сам Бутстрап является отзывчивым фреймворком (в смысле, отзывчивым на изменение ширины экрана, с которого просматривается веб-страница), картинки, которые имеют место быть на странице, отзывчивыми не являются. Т.е. они не подстраиваются под изменения ширины экрана. Собственно, это дело поправимое.

Например, в одном из наших ранее разобранных примеров (файл sait5.html — кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как…», после чего поместите его в вашу папку с Бутстрапом) как раз наблюдался наезд картинок из соседних колонок друг на друга, в результате чего часть изображений обрезалась:

В Bootstrap 3, для придания отзывчивости картинкам на странице, нужно это дело отдельно обозначать, прописывая в теги IMG соответствующий класс — img-responsive. В нашем случае его нужно будет добавить для всех четырех изображений в каждой из колонок. Выглядеть это будет примерно так:

<img src="img/virtuemart-2-300x180.jpg" alt="">

Ну и наш макет страницы будет вести себя уже гораздо более адекватно, ибо при уменьшении ширины экрана, картинки будут уменьшаться для соответствия ширине колонок, в которых они расположены (не наезжая друг на друга):

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

Можно картинки из прямоугольных делать круглыми. Не скруглять углы (об этом чуть ниже), а именно округлять (из квадрата получится в результате круг, а из прямоугольника — овал). Например, таким образом было бы довольно эффектно отображать портрет автора статьи. Для этого используется класс img-circle. Можно этот класс дописать прямо в уже существующий с img-responsive (если он используется для данного изображения). Выглядеть подобное безобразие может примерно так:
```
<img src="img/google-analytics-300x180.jpg" alt="">
```
Описанный выше класс можно применять далеко не к каждой картинке. Зато вот обычное скругление углов может оказаться неплохим дополнением для многих изображений. Делается это с помощью добавления класса из арсенала Bootstrap 3 под названием img-rounded. Скругление получается не сильно-таки и заметным, но радующим глаз:
Ну и, наконец, для некоторых картинок, используемых на странице, может оказаться уместным добавить рамку. Особенно эффектно это будет смотреться на изображениях, фон которых совпадает с фоном страницы. Для этой цели используется класс img-thumbnail.
```
<img src="img/virtuemart-2-300x180.jpg" alt="">
```

Использовать или не использовать последние три класса решать вам самим, а вот делать картинки отзывчивыми (с помощью добавления img-responsive) я бы рекомендовал в обязательном порядке, если у вас нет каких-либо веских причин этого не делать.

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

Продолжение следует >>> (Тут можно подписаться на почтовую рассылку с анонсами новых статей)

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Изменить цвет кнопки при наведении мышкой в 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.

Понимание тега HTML 4.0

Применение фона к кнопке

Для доработки различие между кнопкой обычной формы и кнопкой HTML 4.0, мы должны принудительно новая кнопка, чтобы избавиться от уродливого серого фона. Это можно сделать с небольшим прикосновением к CSS (каскадные таблицы стилей), например следующие правила:

Давайте начнем преобразование, ладно?

Спасите нашу планету!

Под водой

Фон кнопки может быть даже прозрачным, указание цвета фона в объявлении стиля на «прозрачный»:

Прозрачный фон!

Управление шириной / высотой кнопки

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

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

H я !

Пример — имитация кнопок браузера с использованием тега

Bulma: Бесплатная современная CSS-фреймворк с открытым исходным кодом на основе Flexbox

Кнопка — неотъемлемый элемент любого дизайна.Он должен выглядеть и вести себя как интерактивный элемент вашей страницы.

HTML

Кнопка Класс может использоваться на:

якорные ссылки
отправить входные данные
сбросить входы

HTML

   привязка

Цвета #

Кнопка доступна во всех различных цветах , определенных в карте Sass $ colors .

Пример

белый Свет Тьма Чернить Текст Призрак

HTML

Пример

Начальный Связь

Информация Успех Предупреждение Опасность

HTML

Теперь каждый цвет представлен в своей светлой версии .Просто добавьте модификатор is-light к модификатору цвета, чтобы применить облегченную версию кнопки.

Пример

Начальный Связь

Информация Успех Предупреждение Опасность

HTML

Размеры #

Кнопка доступна в 4 разных размерах:

маленький
нормальный
средний
большой

Хотя размер по умолчанию — , нормальный, , модификатор is-normal существует на тот случай, если вам нужно сбросить кнопку до нормального размера.

Пример

Маленький Дефолт Нормальный Середина Большой

HTML

Вы можете изменить размер нескольких кнопок одновременно, заключив их в родительский элемент buttons и применив один из 3 модификаторов:

пуговицы маленькие
пуговицы средние
пуговицы большие

HTML

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

Пример

Маленький Маленький Маленький Нормальный Маленький

HTML

Дисплеи #

Пример

Маленький Нормальный Середина Большой

HTML

Стили #

Обрисованный

Пример

Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах

HTML

Инвертированный (цвет текста становится цветом фона, и наоборот)

Перевернутый Перевернутый Перевернутый Перевернутый Перевернутый

Инвертировать контур (инвертировать цвет становится цветом текста и границы)

Инвертировать контур Инвертировать контур Инвертировать контур Инвертировать контур Инвертировать контур

Пуговицы с закругленными краями

Закругленный Закругленный Закругленный Закругленный Закругленный Закругленный

состояния #

Bulma стилизует различные состояния своих кнопок.Каждое состояние доступно как псевдокласс и класс CSS:

: зависает и зависает
: фокус и сфокусирован
: активный и активный

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

Нормальный

Пример

Нормальный Нормальный Нормальный Нормальный Нормальный Нормальный Нормальный

HTML

Ховер

Пример

Парение Парение Парение Парение Парение Парение Парение

HTML

Фокус

Пример

Фокус Фокус Фокус Фокус Фокус Фокус Фокус

HTML

Активный

Пример

Активный Активный Активный Активный Активный Активный Активный

HTML

Погрузка

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

Загрузка Загрузка Загрузка Загрузка Загрузка Загрузка Загрузка

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

Статический

Вы можете создать неинтерактивную кнопку с помощью модификатора is-static . Это полезно для выравнивания текстовой метки с вводом, например, при использовании надстроек форм.

Статический

   Статический

Отключено

Bulma поддерживает использование логического HTML-атрибута disabled , который запрещает пользователю взаимодействовать с кнопкой.

Неполноценный Неполноценный Неполноценный Неполноценный Неполноценный Неполноценный Неполноценный

Класс is-disabled CSS устарел в пользу HTML-атрибута disabled .Узнать больше

с иконками Font Awesome

Кнопки Bulma можно легко улучшить, добавив значок Font Awesome .Для достижения наилучших результатов оберните внутренний текст в отдельный элемент .

Пример

GitHub @jgthms Сохранять Удалить

GitHub GitHub GitHub GitHub

HTML

  
  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  


  <кнопка>
    
       
    
     GitHub 
  
  <кнопка>
    
       
    
     @jgthms 
  
  <кнопка>
    
       
    
     Сохранить 
  
  <кнопка>
     Удалить 
    
       
    
  


  <кнопка>
    
       
    
     GitHub 
  
  <кнопка>
    
       
    
     GitHub 
  
  <кнопка>
    
       
    
     GitHub 
  
  <кнопка>
    
       
    
     GitHub

Если кнопка содержит только значок, Bulma будет следить за тем, чтобы кнопка оставалась квадратной , независимо от размера кнопки или значка.

  
  <кнопка>
    
       
    
  


  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  


  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  


  <кнопка>
    
       
    
  
  <кнопка>
    
       
    
  
  <кнопка>

Группа кнопок #

Если вы хотите сгруппировать кнопки вместе в одной строке , используйте модификатор is-grouped в контейнере поля :

Пример

Сохранить изменения

Отмена

Удалить сообщение

HTML

  
  
    <кнопка>
      Сохранить изменения
    
  
  
    <кнопка>
      Отмена
    
  
  
    <кнопка>
      Удалить сообщение

Дополнения к кнопкам #

Если вы хотите использовать кнопки в качестве дополнений , используйте модификатор has-addons в поле Контейнер :

HTML

  
  
    <кнопка>
      
         
      
       Влево 
    
  
  
    <кнопка>
      
         
      
       Центр 
    
  
  
    <кнопка>
      
         
      
       Вправо

Группа кнопок с надстройками #

Вы также можете сгруппировать дополнения:

HTML

  
  
    <кнопка>
      
         
      
       Полужирный 
    
  
  
    <кнопка>
      
         
      
       Курсив 
    
  
  
    <кнопка>
      
         
      
       Подчеркнутый 
    
  



  
    <кнопка>
      
         
      
       Влево 
    
  
  
    <кнопка>
      
         
      
       Центр 
    
  
  
    <кнопка>
      
         
      
       Вправо

Список кнопок #

Вы можете создать список кнопок с помощью контейнера кнопок .

Сохранить изменения Сохранить и продолжить Отмена

Если список очень длинный , он автоматически переносится на нескольких строк , сохраняя при этом все кнопки на одинаковом расстоянии .

Один Два Три Четыре Пять Шесть Семь 8 9 Десять 11 Двенадцать Тринадцать 14 Пятнадцать Шестнадцать Семнадцать 18 19 20

Вы можете соединить кнопки вместе с модификатором 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

переменная

цвет

Размер кнопки HTML

Размер кнопки HTML может быть изменен в зависимости от использования программиста.Кнопка HTML отправляет HTML-страницу.

Размер кнопки HTML может быть изменен программистом. Кнопка HTML отправляет HTML-страницу.
Размер кнопки HTML может быть изменен в зависимости от использования программиста. Кнопка HTML отправляет HTML-страницу.
В следующем примере мы узнаем, как изменить размер HTML кнопка. Сначала мы создаем HTML-страницу. Затем мы отображаем кнопку HTML с определенным ширина, высота и цвет. Эту ширину, высоту и даже цвет можно изменить как по желанию пользователя.
Тег

Вывод: Следующий вывод показывает две кнопки с разными размер и цвет.
HTML-кнопка
очень полезна при выполнении действий пользователя. На кнопке нажмите вы может выполнять такие действия, как отправка формы, вызов функции JavaScript и т. д.
В этом примере мы объяснили вам, как добавить свойства таблицы стилей. к объекту кнопки. С помощью таблицы стилей можно сделать красивый кнопки. Прочтите больше руководств по html .
Связанные руководства по HTML:
HTML-макет
Макет веб-страницы похож на макет страниц в газете.HTML столбцы используются для представления содержимого веб-страницы. Столбцы HTML созданы с помощью таблиц для оформления макета
Установить цвета фона и Изображения в HTML
Цвет фона веб-страниц можно установить с помощью атрибута body. bgcolor и поместив в него любое значение цвета на HTML-странице.
Каскадная таблица стилей (CSS)
Каскадная таблица стилей (CSS), известная как язык таблиц стилей, определяет представление документа, написанного на языке разметки.
Объявления
Согласно исследованиям, какой цвет кнопки призыва к действию является лучшим?
Каждый интернет-маркетолог согласится с тем, что ключом к успеху является конверсия: больше людей, нажимающих на ваши кнопки «Подписаться» или «Купить сейчас» , означает больше потенциальных клиентов и продаж. Но когда дело доходит до выбора цвета кнопок, это очень обсуждаемая тема. Могут ли определенные цвета повысить коэффициент конверсии? В этой статье мы рассмотрим, что, по мнению исследователей, является лучшим цветом кнопки призыва к действию.
Что говорят эксперты по конверсии?
Возможно, вы слышали много противоречивых советов по оптимизации конверсии, особенно когда речь идет о цвете.
Конечно, все мы знаем, что срочность, социальное обоснование, понятный дизайн и правильный лид-магнит могут помочь конверсиям.
Но цвет? Это непростой вопрос.
Вы могли встретить практикующих, которые утверждали, что нашли «секрет» эффективной оптимизации. Как правило, вы увидите этих людей, принадлежащих к одному из трех лагерей:
Генерализаторы. Оптимизатор коэффициента конверсии этого типа будет строго придерживаться общих передовых практик. Однако они не будут углубляться в психологию своих клиентов, чтобы настроить свои кампании.
Голубиные охотники. Этот второй тип придерживается очень специфических стратегий. Они скажут вам, что есть определенные «секреты», которые гарантированно увеличат вашу конверсию. Они скажут вам, что определенный цвет, шрифт или макет — залог вашего успеха.
Бесконечные тестеры. Третий тип не придерживается какой-либо стратегии. Эти оптимизаторы достаточно экспериментировали, чтобы понять, что некоторые стратегии не обязательно работают для всех. Вместо этого они скажут вам тестировать разные вещи, почти наугад, пока вы не найдете что-то, что работает.
Когда вы сталкиваетесь с вопросом, какой цвет кнопки призыва к действию лучше всего подходит, у каждого лагеря будет свой ответ…
Генерализаторы скажут вам, что есть некоторые общие истины о цвете.Некоторые цвета хорошо подходят для определенных отраслей, а есть цвета, которые вам не следует использовать.
Голубиные охотники предпочитают один цвет, который преобразуется лучше, чем любой другой.
Бесконечные тестеры скажут, что цвет может иметь значение, но непостоянным или предсказуемым образом.
Ясно, что не все могут быть правы.
Возможно, цвет не играет значительной роли в конверсиях, как мы думали. Или, может быть, здесь происходит что-то более тонкое?
Имеет ли значение цвет CTA?
Психологически нет никаких сомнений в том, что цвет может оказывать сильное влияние на людей.
Например, цвет комнаты может повлиять на ваше настроение. Было показано, что красный цвет повышает кровяное давление, увеличивает скорость дыхания и учащает сердцебиение. С другой стороны, синий имеет противоположный эффект: он снижает артериальное давление, замедляет дыхание и снижает частоту сердечных сокращений.
В одном исследовании, проведенном учеными из Университета Британской Колумбии, было показано, что синий цвет улучшает творческие способности, тогда как красный улучшает память и внимание к деталям.
На основании этих результатов кажется, что маркетологи должны иметь возможность использовать «психологию цвета» для создания более убедительных логотипов и материалов для брендинга.
И многие маркетологи действительно пытались это сделать.
На самом деле, вы, вероятно, видели раньше хотя бы одну подобную инфографику:
Приведенная выше инфографика от The Logo Company пытается показать четкую взаимосвязь между цветом и психологическим влиянием, которое цвет оказывает на то, как мы воспринимаем бренд.
Рестораны, например, пытались использовать красный цвет, чтобы пробудить чувство голода.
Однако многие психологические отчеты о влиянии цвета дают неоднозначные результаты…
Например, действительно ли красный цвет стимулирует аппетит? Фактические исследования показывают, что красный цвет подавляет аппетит у людей и имеет тенденцию подавлять поведение в целом, что-то вроде знака «стоп».Однако красный действительно стимулирует кормление рыб нильской тилапии.
В исследовании результатов олимпийским борцам случайным образом давали синюю или красную форму. Борцы в красной форме значительно превзошли своих соперников в синей форме, что указывает на то, что красный цвет может сделать вас более агрессивным или более конкурентоспособным.
Но в другом исследовании, проведенном в академической среде, наличие красного цвета фактически снижает производительность .
Все эти результаты предполагают, что красный цвет может сделать вас «победителем» или «проигравшим» (или «голодным» или «не голодным»), в зависимости от контекста (и в зависимости от того, человек вы или рыбы).
Этот контекст становится только более сложным, если вы посмотрите на культурные значения, связанные с цветом…
Возьмем, к примеру, черный и белый цвета.
В западной культуре черный цвет символизирует похороны, смерть и траур. Белый цвет ассоциируется с невестами, свадьбами и чистотой.
Но в Китае все наоборот: белый цвет — символ смерти и траура. Черный цвет для мальчиков.
Даже если вы включите в уравнение что-то столь же произвольное, как пол, оно станет более сложным…
В исследовании Джо Хэллока было установлено, что мужчины и женщины предпочитают разные цвета следующим образом:
Итак, как маркетологи должны понимать все это? Как вы можете использовать психологическое воздействие цвета, чтобы побудить людей покупать больше ваших вещей?
Создание контекста
Теоретически может показаться возможным выбрать «идеальный» цвет: тот, который культурно и демографически соответствует вашей личности покупателя и контекстуально соответствует вашему бренду.
Проблема в том, что нет четкого способа это доказать.
Допустим, вы изменили цвет призыва к действию с синего на красный и заметили рост конверсий. Означает ли это, что красный преобразуется лучше, чем синий?
Не обязательно.
Видите ли, здесь дело не только в цвете самой кнопки.
Переменные включают не только ваш бренд и вашу аудиторию, но и окружающий дизайн. Практически невозможно выделить все переменные и окончательно доказать, какой цвет преобразуется лучше всего.
Скажем по-другому. В лучшем случае было бы непрактично сначала попытаться понять, как ваш покупатель реагирует на цвет, а затем разработать на его основе стратегию преобразования на основе цвета. Было бы очень трудно, если не невозможно, закрепить. Вы бы потратили меньше усилий и увидели похожие результаты, если бы просто пробовали разные цвета по одному, пока не нашли один, который превосходит другие.
Но это не то, что мы предлагаем вам делать. Есть гораздо лучший способ решить эту проблему с цветом, не бросая что-то в стену и не смотреть, что прилипает.
Что мы знаем о цвете кнопки с призывом к действию
Если вы не знаете, как использовать цвет на своем веб-сайте, не волнуйтесь — вы не одиноки. Маркетологи десятилетиями пытались взломать «цветовой код».
Итак, вместо того, чтобы сосредотачиваться на том, чего мы не знаем, давайте сосредоточимся на том, что мы делаем знаем…
Ваш CTA-цвет должен стать популярным
Мы знаем, что более заметный и привлекательный призыв к действию приводит к большему количеству конверсий.Следовательно, любое изменение цвета, которое увеличивает видимость вашего призыва к действию, должно увеличивать количество конверсий.
Если, например, цвет вашей кнопки мало контрастирует с цветом фона, видимость будет плохой.
Но увеличьте контраст между цветом кнопки и цветом фона, и бум! Ваши конверсии вырастут.
Не требуется понимание контекста или психологических оснований.
Вот пример отличной кнопки CTA с высокой контрастностью:

(Изображение предоставлено Dribble.Другой фактор, который следует учитывать, — это общая цветовая схема вашей страницы. Если на вашей странице доминирует один цвет, и этот цвет также используется для вашего призыва к действию, он не будет выделяться. Чтобы сделать ваш призыв к действию действительно ярким, снова выберите контрастный цвет.
В одном тесте HubSpot обнаружил, что красные кнопки работают лучше, чем зеленые. Вполне возможно, что красный цвет конвертировался лучше, чем зеленый, потому что зеленый был доминирующим цветом на странице. Таким образом, красный создает больший контраст:
Чтобы получить максимальную контрастность, выберите дополнительный цвет : тот, который противоположен вашему доминирующему цвету на цветовом круге.
Еще один высококонтрастный цвет — это триадный цвет : цвет, который составляет треть длины цветового круга от вашего доминирующего цвета.
Ваши цвета должны соответствовать марке
Из исследований мы также знаем, что люди по-разному воспринимают цвета в зависимости от того, насколько хорошо эти цвета «соответствуют» вашему бренду.
Независимо от того, привлекает ли ваш бренд индивидуальность вашего бренда или нет, и помогают ли ваши цвета воспринимаемой индивидуальности вашего бренда или вредит ли это, на самом деле влияет на решения о покупке.
Например, допустим, ваш бренд жесткий, суровый и мужественный… как Harley Davidson. А теперь представьте, если бы они использовали розовые кнопки с призывом к действию вместо большой оранжевой кнопки. Это не совсем сработает, не так ли?
Полный ответ, конечно, таков, что это зависит от вашей целевой аудитории. ?
Ваши цвета должны быть одинаковыми
Еще одна вещь, которую маркетологи знают о цветах, — это то, что мы можем контролировать значение, которое наши пользователи связывают с ними.
Помните те исследования, о которых мы упоминали ранее? Как красный цвет может иметь совершенно разное влияние в зависимости от контекста? Логическая причина в том, что из этого контекста создается ассоциация .
Например, синий — наиболее часто используемый цвет для гиперссылок. Поэтому у большинства людей синий цвет ассоциируется с гиперссылками. Они знают, что если текст на странице синий, вы, вероятно, можете щелкнуть по нему.
То же самое и с кнопками с призывом к действию.Вам не нужно выбирать синий цвет, но имейте в виду, что любой цвет, который вы назначаете кнопке, теперь будет связан с действием. Используйте это в своих интересах, постоянно используя этот цвет для всех призывов к действию на вашем сайте.
Не вводите пользователей в заблуждение, используя один и тот же цвет для элементов, не связанных с действием, например заголовков, на которые невозможно нажать.
Точно так же не вводите пользователей в заблуждение, используя на одной странице много разных цветов призыва к действию.
OptinMonster постоянно использует зеленый цвет для всех своих основных кнопок призыва к действию.Менее важные кнопки (например, кнопка «Подписаться» в нижнем колонтитуле) имеют низкоконтрастный синий цвет. Таким образом, совершенно ясно, что должен делать пользователь: нажмите кнопку «Получить OptinMonster сейчас».
Согласованность создает хорошее впечатление для пользователей веб-сайта, что имеет решающее значение для оптимизации коэффициента конверсии.
Итог по цвету
Практически невозможно доказать, что какой-то один цвет лучше любого другого для убеждения аудитории. Слишком много переменных и слишком много противоречивых свидетельств, чтобы прийти к какому-либо универсальному выводу.
Поэтому вместо того, чтобы пытаться найти «идеальный» цвет, выберите цвет, который увеличивает заметность вашего призыва к действию. Используя этот простой и проверенный подход, вы можете практически гарантировать увеличение конверсии.
Если вы ищете надежный способ повысить коэффициент конверсии, вам подойдет такое практическое решение, как OptinMonster. Вместо того, чтобы гадать в темноте, OptinMonster поможет вам улучшить показатели конверсии с помощью более четкой аналитики и простого сплит-тестирования A / B.Нажмите здесь, чтобы попробовать OptinMonster и значительно увеличить количество конверсий на вашем сайте.
Итак, какой цвет кнопки призыва к действию вам больше всего подходит? Вы пробовали использовать разные цвета на своем сайте? Дайте нам знать об этом в комментариях!
Опубликовано Мэри Фернандес
Мэри Фернандес — профессиональный блоггер. Когда ее нет за столом, Мэри обычно исследует солнечный Сан-Диего, штат Калифорния, со своим ноутбуком, мужем и тремя детьми на буксире.
Как настроить кнопку отправки с помощью CSS
ОБНОВЛЕНИЕ: попробуйте видеокурс Form Designer для создания фантастических стилей кнопки отправки!

Знаете ли вы, что зеленый и синий — самые расслабляющие цвета? Вот почему они используются самыми популярными веб-сайтами, чтобы помочь пользователям чувствовать себя комфортно при просмотре этих веб-сайтов.Кнопки отправки в веб-формах также должны казаться правильными, потому что именно здесь люди делятся своей самой конфиденциальной информацией.
С помощью этого руководства вы узнаете, как настроить кнопки отправки, чтобы ваши посетители чувствовали себя комфортно при отправке своей информации и повышали коэффициент конверсии.
1. Щелкните значок конструктора форм
2. Перейдите на вкладку « CSS » и вставьте следующий код CSS или свои собственные коды CSS.
.кнопка отправки формы {
фон: # 0066A2;
цвет: белый;
бордюр: начальный;
цвет рамки: # 0066A2;
высота: 50 пикселей;
ширина: 100 пикселей;
шрифт: полужирный, 15 пикселей, без засечек;
тень текста: нет;
}
Вот как это будет выглядеть потом
Подробная информация о коде CSS для кнопки отправки
.form-submit-button — выбирает кнопку отправки в вашей форме.
фон — Устанавливает цвет фона для текста.
цвет — Определяет цвет вашего текста.
border-style — Устанавливает стиль границ кнопки отправки.
border-color — Устанавливает цвет границ кнопки отправки.
высота — Устанавливает высоту вашей кнопки и указывается в пикселях.
ширина — Устанавливает ширину вашей кнопки и указывается в пикселях.
шрифт — Устанавливает свойства шрифта.
ПРИМЕЧАНИЕ. Не забудьте поставить точку с запятой (;) после каждого свойства.
Кнопка отправки CSS3 и эффект наведения
Выполните действия по изменению кнопки отправки, как указано выше. Единственное, что меняется, — это код.
Пример CSS3 для кнопки отправки:
.form-submit-button {
background: # B9DFFF;
цвет: #fff;
граница: сплошная 1px #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}
.кнопка отправки формы: наведите указатель мыши на {
фон: # 016ABC;
цвет: #fff;
граница: сплошная 1px #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}
Вот как это выглядит.
и при наведении на него указателя мыши:
Подробная информация о каждом коде CSS3 для вашей кнопки отправки
.form-submit-button: hover — это класс, когда указатель мыши находится на кнопке отправки. Все остальные поля остаются такими же, кроме фона, чтобы показать, что происходит при наведении курсора мыши.
border-radius — закругляет угол кнопок отправки.
box-shadow — Устанавливает тень для кнопки отправки.
text-shadow (не применяется к примеру) — Устанавливает тень для текста внутри вашей кнопки отправки.
Как у вас дела? Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.
Наша служба поддержки клиентов работает круглосуточно и без выходных, а среднее время ответа составляет от одного до двух часов.
Bootstrap Buttons — примеры и руководство
Buttons
Адаптивные кнопки, созданные с использованием последней версии Bootstrap 5. Кнопки предоставляют предопределенные стили (предупреждение, информация, опасность) для нескольких типов кнопок: контурные, округлые, социальные, плавающие, фиксированные, теги и т. Д.
Используйте настраиваемые стили кнопок MDB для действий в формах, диалоговых окнах и т. Д. С поддержкой несколько размеров, состояний и т. д.
Примечание: Прочтите вкладку API , чтобы найти все доступные параметры и расширенная настройка
Видеоурок
Базовый пример
Кнопка

Отключить перенос текста
Если вы не хотите, чтобы текст кнопки переносился, вы можете добавить .text-nowrap к кнопке. В Sass вы можете установить $ btn-white-space: nowrap , чтобы отключить перенос текста для каждой кнопки.
Цвета
MDB включает несколько предопределенных стилей кнопок, каждый из которых служит своей семантической цели, с несколько статистов добавлены для большего контроля.
Начальный Вторичный Успех Опасность Предупреждение Информация Свет Тьма Связь

Передача смысла вспомогательным технологиям:
Использование цвета для добавления смысла дает только визуальную индикацию, которая не будет передана пользователи вспомогательных технологий, например программ чтения с экрана.Убедитесь, что информация, обозначенная цвет либо очевиден из самого контента (например, видимого текста), либо включен альтернативными способами, такими как дополнительный текст, скрытый с помощью . Визуально скрытый класс.
Контур
Нужна кнопка, но не богатые цвета фона, которые они приносят? Заменить по умолчанию классы-модификаторы с .btn-outline- * , чтобы удалить все фоновые изображения и цвета на любой кнопке.
В кнопках структуры мы рекомендуем добавить data-mdb-ripple-color = "dark" , чтобы изменить цвет волновой эффект . Светлый цвет ряби по умолчанию (применяется автоматически к каждой кнопке) могут быть плохо видны в случае кнопок со светом и контуром.
Чтобы узнать больше об эффекте ряби и всех доступных опциях, посмотрите Документы Ripple.
Начальный Вторичный Успех Опасность Предупреждение Информация Свет Тьма

В некоторых стилях кнопок используется относительно светлый цвет переднего плана, и их следует использовать только на темный фон для обеспечения достаточного контраста.
округлено
Добавьте .btn-rounded class, чтобы кнопка закруглялась.
Начальный Вторичный Успех Опасность Предупреждение Информация Свет Тьма

Закругленный контур
Вы можете использовать .btn-outline- * и .btn-Round вместе, чтобы получился очертание кнопки и закругление одновременно.
Начальный Вторичный Успех Опасность Предупреждение Информация Свет Тьма
кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Начальный кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Вторичный кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Успех кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Опасность кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Предупреждение кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Информация кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Свет кнопка < type = "кнопка" data-mdb-ripple-color = "темный" > Тьма
Плавающий
Используйте .btn-Floating , чтобы сделать круглую кнопку.
Для правильной работы вам нужно поместить значок внутрь. Текст не будет вписываются. Вы можете найти сотни доступных значков в нашем значки docs.

К плавающим кнопкам можно применить почти все те же классы и атрибуты, что и к обычные пуговицы — цвета, рябь, размеры, контур и т. д.
кнопка < type = "кнопка" data-mdb-ripple-color = "темный" >
Кнопки фиксированные
Используйте .fixed-action-btn класс для создания фиксированной кнопки со списком доступных параметры, которые отображаются при наведении или щелчке.
См. Живой пример фиксированной кнопки в правом нижнем углу этой страницы.
Примечание: Доступны показать / скрыть методы для вручную открыть и закрыть список. Прочтите вкладку API , чтобы узнать больше.
<а > <а > <а > <а > <а >
Социальные сети
Комбинируя наши значки и пользовательские цвета, вы можете создавать кнопки социальных сетей.Объединяя наши значки и пользовательские цвета, вы можете создавать кнопки социальных сетей. Смотрите все доступные значки в нашем поиск иконок (проверьте «бренды» для фильтрации значков брендов).
В приведенном ниже примере мы размещаем значок Facebook внутри кнопки и установите цвет фона от до # 3B5998 (цвет бренда facebook).

Образцы марок
Несколько самых популярных брендов в виде социальных кнопок.

Плавающий социальный
Добавив .btn-Floating вы можете создать красивую плавающую кнопку социальных сетей.
<а href = "#!" роль = "кнопка" >
Текст
Вам не нужно использовать только значок. Вы можете добавить текст к кнопке. Не забудьте добавить классы интервалов (например, .me-2 ), чтобы обеспечить правильное расстояние между значком и текст.
Твиттер
Twitter
Только значок
Удалив классы кнопок и заменив цвет фона на цвет вы можете создавать минималистичные, кликабельные иконки.

Уведомления
Используя значок, вы можете создать кнопку с уведомлением, чтобы предоставить счетчик.
8
8
Теги
Классы .btn предназначены для использования с
Размеры
Хотите кнопки большего или меньшего размера? Складываем .btn-lg или .btn-sm для дополнительные размеры.
Кнопка Кнопка Кнопка

Активное состояние
Добавьте класс .active , чтобы кнопка выглядела нажатой.
Первичная ссылка Связь
Первичная ссылка Ссылка
Отключено
Сделайте кнопки неактивными, добавив логический атрибут disabled к любому
Отключенные кнопки, использующие элемент , ведут себя немного иначе:
не поддерживают атрибут disabled , поэтому необходимо добавить модель .отключен класс , чтобы он визуально казался отключенным.
Включены некоторые удобные для будущего стили, чтобы отключить все события указателя на якорных кнопках. В браузерах, поддерживающих это свойство, вы отключенного курсора вообще не будет.
Отключенные кнопки должны включать aria-disabled = "true" атрибут, указывающий состояние элемента для вспомогательные технологии.
Первичная ссылка Связь
<а href = "#" tabindex = "- 1" роль = "кнопка" aria-disabled = "правда" > Первичная ссылка <а href = "#" tabindex = "- 1" роль = "кнопка" aria-disabled = "правда" > Ссылка
Предупреждение о функциональности Link:
Модель .disabled класс использует событий-указателей: нет , чтобы попытаться отключить функциональность ссылки s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают события указателя : нет , клавиатура навигация остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологии по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте tabindex = "- 1" атрибут для этих ссылок (чтобы они не получали клавиатуру focus) и используйте собственный JavaScript, чтобы отключить их функциональность.
Блок кнопок
Создавайте гибкие стопки полноразмерных «кнопок блокировки», как в Bootstrap 4, с помощью сочетания нашего дисплея и утилит разрыва. Используя утилиты вместо классов, специфичных для кнопок, мы иметь гораздо больший контроль над интервалом, выравниванием и реактивным поведением.
Кнопка Кнопка

Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до тех пор, пока md точка останова, где .d-md-block заменяет .d-grid , таким образом сводя на нет полезность gap-2 . Измените размер вашего браузер, чтобы увидеть, как они меняются.
Кнопка Кнопка

Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки.Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его по горизонтали с помощью .mx-auto тоже.
Кнопка Кнопка

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

Переключить состояния
Добавьте data-mdb-toggle = "button" , чтобы переключить активное состояние кнопки.Если при предварительном переключении кнопки необходимо вручную добавить класс .active и aria-press = "true" от до кнопка < type = "кнопка" data-mdb-toggle = "кнопка" autocomplete = "выкл" ария-прессованный = "правда" > Активная кнопка переключения кнопка < type = "кнопка" отключен data-mdb-toggle = "кнопка" autocomplete = "выкл" > Отключенная кнопка переключения Переключить ссылку Активная ссылка переключения Отключено переключение ссылки
Переключить ссылку <а href = "#" роль = "кнопка" data-mdb-toggle = "кнопка" ария-прессованный = "правда" > Активная ссылка переключения Отключено переключение ссылки
Правда о лучших и худших цветах кнопок призыва к действию для вашего веб-сайта
Компании в Интернете постоянно ищут лучшие способы привлечь клиентов и побудить их к действию.
Если вы владелец малого бизнеса, возможно, вы тоже ищете новые способы привлечь внимание клиентов.
Один из самых простых способов сделать это — использовать цветовую схему. Было проведено множество исследований, чтобы доказать, какие цвета лучше всего подходят для кнопок призыва к действию на веб-сайтах.
Ниже приведены 3 лучших цвета кнопок для кликов, за которыми следуют три худших цвета кнопок для кликов.
3 лучших цвета для кнопок призыва к действию:
1.Красный. Красный цвет выделяется на большинстве веб-страниц. Он пробуждает страсть, волнение и безотлагательность. Если вы хотите, чтобы ваши клиенты приняли срочные меры в отношении вашего продукта (например, приобрели его, загрузили электронную книгу и т. Д.), Тогда красный — правильный цвет. Как ни странно, многие люди заявляют, что красный обычно идет рука об руку со стопом, но исследования показывают, что это один из лучших цветов для кнопок призыва к действию.
2. Зеленый . Если продукт или услуга, которые вы продаете, связаны с окружающей средой, психологией и миром, тогда зеленый цвет — правильный цвет кнопки призыва к действию для вас.Зеленый успокаивает и может ассоциироваться со словом «идти», что мотивирует многих клиентов. Вашим клиентам может быть легче психологически нажать на зеленую кнопку, а не на кнопки других цветов.
3. Оранжевый или желтый . Апельсин возбуждающий и теплый. У большинства людей это ассоциируется с теплом от солнца. Это тепло, в свою очередь, побуждает людей действовать. Когда клиенты чувствуют себя счастливыми, они с большей вероятностью купят продукты, которые ассоциируются у них со счастьем. Не забываем, что весь сайт Amazon окрашен в желтый и оранжевый цвета.Это работает для них, и они проводят ТОННУ тестирования оптимизации веб-сайтов, поэтому есть много доказательств того, что это будет работать и для вашего веб-сайта.
3 худших цвета кнопок призыва к действию:
1.