Button html изменить цвет кнопки

Как сделать кнопку в CSS

В этой статье мы расскажем о том как сделать кнопку в CSS?. Но понимание разницы между Flat UI и Material Design не имеет смысла, если вы не знаете, какие компоненты нужно применять. Давайте быстро пробежимся по основам создания кнопок с помощью CSS .

Основы CSS кнопок

Существует несколько « нетехнических » стандартов кнопок:

1. Доступность – имеет первостепенное значение. Пользователи с ограниченными возможностями и старыми браузерами должны иметь простой доступ к кнопкам;
2. Простой текст – пишите на кнопках простой и короткий текст. Пользователи должны сразу понять назначение кнопки и то, куда она их приведет.

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

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

Цвет

Изменить цвет CSS buttons можно с помощью различных свойств: color , background-color и border . Сначала разберемся, как выбрать цвет кнопки:

1. Комбинации цветов – используйте цвета, которые дополняют друг друга. Colorhexa – отличный инструмент для поиска сочетающихся цветов;
2. Соблюдение палитры — если вы ищете палитру цветов, зайдите на lolcolors .

Тени

С помощью box-shadow можно добавить тень вокруг объекта. Эта идея реализована в Flat UI и Material Design . Более подробно о свойстве box-shadow можно почитать на MDN .

Время плавного перехода

Свойство transition-duration добавляет временные рамки CSS изменениям . Стили кнопки без плавного перехода моментально меняются на стили псевдокласса :hover , что может отпугнуть пользователя. В следующем примере стиль кнопки плавно меняется ( за 0.5 с ): на :hover :

.color-change < border-radius: 5px; font-size: 20px; padding: 14px 80px; cursor: pointer; color: #fff; background-color: #00A6FF; font-size: 1.5rem; font-family: 'Roboto'; font-weight: 100; border: 1px solid #fff; box-shadow: 2px 2px 5px #AFE9FF; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; >.color-change:hover

Код для плавных переходов сложный и старые браузеры по-разному выполняют анимацию. Поэтому нужно добавить префиксы для старых браузеров:

transition-duration: 0.5s /* Обычная запись, работает во всех современных браузерах*/ -webkit-transition-duration: 0.5s; /* Помогает некоторым версиям safari, chrome и android */ -moz-transition-duration: 0.5s; /* для firefox */

Сброс стилей кнопки

Чтобы браузер установил значение по умолчанию для CSS button style , можно установить пользовательские стили:

Лучше применять это к классам элементов кнопки, а не к каждой кнопке по отдельности.

Три стиля кнопок

Простой черный и белый

Такие кнопки хорошо сочетаются с множеством различных стилей. Этот эффект основан на контрасте черного и белого.

Рассмотрим код черной кнопки с белым фоном. Чтобы перекрасить кнопку в другой цвет, поменяйте в button стилях CSS все значения white и black местами :

.suit_and_tie < color: white; font-size: 20px; font-family: helvetica; text-decoration: none; border: 2px solid white; border-radius: 20px; transition-duration: .2s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; background-color: black; padding: 4px 30px; >.suit_and_tie:hover

В приведенных выше стилях видно, что свойства font и background-color меняют свои значения со свойством transition-duration.2s . Можно взять цвета своих любимых брендов и создать свою кнопку. Цвета брендов можно найти на BrandColors .

Кнопки Flat UI

Flat UI делает упор на минимализм в HTML button CSS – больше действий, меньше движений. Обычно я перехожу от черно-белых кнопок на Flat UI , когда мой проект начинает обретать форму. Кнопки Flat UI имеют минималистичный вид и подходят под большинство дизайнов.

Улучшим нашу кнопку, добавив ей движения для имитации 3D эффекта .

Мы рассмотрим первую кнопку:

.turquoise < margin-right: 10px; width: 100px; background: #1abc9c; border-bottom: #16a085 3px solid; border-left: #16a085 1px solid; border-right: #16a085 1px solid; border-radius: 6px; text-align: center; color: white; padding: 10px; float: left; font-size: 12px; font-weight: 800; >.turquoise:hover < opacity: 0.8; >.turquoise:active

У button CSS три состояния: обычное, :hover и :active .

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

Вместо того чтобы указать сплошную рамку border , тут используются свойства border-bottom , border-left и border-right , которые создают 3D-эффект глубины.

Псевдокласс :active часто используется в Flat UI кнопках. Когда наша кнопка становится :active происходит две вещи:

1. :border-bottom меняется с 3px на 1px . Тень под кнопкой уменьшается, а кнопка опускается на пару пикселей. Это изменение позволяет пользователю почувствовать, что он нажал кнопку;
2. Цвет фона темнеет, имитируя смещение кнопки от пользователя к экрану. Что также напоминает пользователю о том, что он нажал кнопку.

Во Flat UI ценятся минималистичные движения кнопок, « рассказывающие большую историю ». Многие имитируют сдвиг кнопки с помощью :border-bottom . Стоит отметить, что во Flat UI есть кнопки, которые вообще не двигаются, а только меняют цвет.

Material Design

Material Design – подход к дизайну, который продвигает идею передачи информации в виде карточек с различной анимацией для привлечения внимания. Google перечислил на странице Material Design Homepage три основных принципа:

• Слово «Материальный» — это метафора;
• Монотонность, графика, агрессивность;
• Движение передает значение.

Чтобы лучше понять три этих принципа, взглянем на Material Design в действии:

Эти CSS buttons реализуют две основные идеи – свойство box-shadow и Polymer .

Polymer – фреймворк для создания сайтов. С его помощью эффект распространяющейся волны на кнопках добавляется всего одной строкой кода:

 
SUBMIT
 /* эта строка добавляет эффект */
 

— компонент Polymer . Подключив фреймворк в самом начале HTML , мы получаем доступ к его компонентам. Более подробно ознакомиться с возможностями фреймворка можно на сайте Polymer project .

Теперь поговорим о CSS коде, который реализует принципы Material Design :

body < background-color: #f9f9f9; font-family: RobotoDraft, 'Helvetica Neue'; >/* Button */ .button < display: inline-block; position: relative; width: 120px; height: 32px; line-height: 32px; border-radius: 2px; font-size: 0.9em; background-color: #fff; color: #646464; margin: 20px 10px; transition: 0.2s; transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); >.button:active < box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; >/* Misc */ .button.grey < background-color: #eee; >.button.blue < background-color: #4285f4; color: #fff; >.button.green < background-color: #0f9d58; color: #fff; >.center

Во всех button CSS используется свойство box-shadow . Удалим весь неменяющийся CSS код и посмотрим, как box-shadow работает:

Свойство box-shadow используется в button стилях CSS для добавления тонкой темной тени слева и снизу у каждой кнопки. При нажатии тень немного увеличивается и становится светлее. Это движение имитирует эффект 3D тени , которая как бы подпрыгивает от страницы к пользователю. Эффект прописан в стилях Material Design и его принципах.

Кнопки в стиле Material Design можно создать путем совмещения Polymer и box-shadow эффектов.

• Слово « материальный » – метафора – с помощью свойства box-shadow мы имитируем эффект 3D тени , создаем аналог настоящей тени;
• Монотонность, графика, агрессивность – больше относится к ярко-голубым и зеленым кнопкам;
• Значение передается при помощи движений – с помощью Polymer и анимации свойства box-shadow можно создавать множество различных движений, когда пользователь нажимает на кнопку.

В заключение

Черно-белые кнопки довольно просты и понятны. Flat UI кнопки тоже простые и используют мелкие движения и цвета, чтобы « рассказать большую историю ». Material Design использует крупномасштабные сложные движения, имитирующие реальную тень, чтобы привлечь внимание пользователя.

ВЛ Виктория Лебедева автор-переводчик статьи « An Introduction to the Basics of Modern CSS Buttons »

Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!

Источник

HTML тег

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

Пример

html> html> head> title>Заголовок документа title> head> body> h1>Вот наша кнопка.. h1> button type="button">Нажать button> body> html>

Результат

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

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

Пример

html> html> head> title>Заголовок документа title> head> body> Обычная кнопка button type="button">Добавить в корзину button> hr /> Кнопка с красным текстом button type="button" style="color: red;">b>Книга HTML b> button> hr /> Кнопка с увеличенным размером шрифта button type="button" style="font: bold 14px Arial;">Загрузить книгу button>br /> body> html>

Результат

Атрибуты

У тега нет обязательных атрибутов, однако мы рекомендуем всегда использовать атрибут type=”button”, если тег используется в качестве обычной кнопки.

Атрибут	Значение	Описание
autofocus	autofocus	Указывает браузеру, что кнопка должна получить фокус после загрузки страницы.
disabled	disabled	Деактивирует кнопку. (Используется в случае, когда кнопка должна стать активной после выполнения какого-либо действия.)
form	form_id	Указывает форму, к которой относится кнопка. Если кнопка относится к нескольким формам, то их идентификаторы (form_id) должны быть разделены пробелами.
formaction	URL	Задаёт адрес, куда будут пересылаться данные формы при нажатии на кнопку. (Используется только для кнопок с атрибутом type=»submit»).
formenctype	application/x-www-form- urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только для кнопок с атрибутом type=»submit»). все символы кодируются перед отправкой (значение по умолчанию). символы не кодируются пробелы заменяются знаком «+», но символы не кодируются.
formmethod	Указывает метод HTTP запроса, который будет использован при отправке данных формы. (Используется только для кнопок с атрибутом type=»submit»)
	get	Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
	post	Браузер устанавливает связь с сервером и посылает данные для обработки.
formnovalidate	formnovalidate	Отменяет проверку данных формы на корректность. (Используется только для кнопок с атрибутом type=»submit»).
formtarget	Указывает, где показывать ответ после отправки формы. (Используется только для кнопок с атрибутом type=»submit»).
	blank	открывает ответ в новом окне.
	self	открывает ответ в текущем окне.
	parent	открывает ответ в родительском фрейме.
	top	открывает ответ во всю ширину окна.
name	name	Определяет имя кнопки.
type	Определяет тип кнопки.
	button	обычная кнопка
	reset	кнопка, которая очищает форму от введенных данных
	submit	кнопка для отправки данных формы
value	text	Устанавливает значение кнопки.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

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

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Как изменить цвет кнопки: полная инструкция для новичков

Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки) :

Кнопка внутри формы (input type=»submit»):

Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]

Кнопка, как отдельный элемент в html кода:

А теперь меняем цвет, с помощью псевдоэлемента :before

Кнопка в Bootstrap

Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.

К примеру, у вас есть кнопка

И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:

.btn.btn-outline-primary:hover < background: red; /* Либо любой другой цвет */ /* А также заменил бы цвет и для border */ >

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

Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.

Первый вариант — мы будем добавлять класс с нашей кнопки через js:

Второй вариант — мы будем менять css стили прямо в js:

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

Источник