Селекторы css

Подборка 10 css3 кнопок / Habr

В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.

1. Super Awesome Buttons.

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

Подробнее о Pure CSS social media icons »

6. Extremely fancy CSS3 buttons.

Все владельцы iOs устроиств несоменно узнают данные кнопки, подобные кнопки присутствуют в iOs устроиствах начиная с первых версий. Эти кнопки, как и многие здесь представленые имеют настройки цвета, размера и сделаны на чистом css3.

Подробнее о Extremely fancy CSS3 buttons »

Подробнее о BonBon: Sweet CSS3 buttons »

Подробнее о Realistic Looking CSS3 Buttons »

Подробнее о Simple CSS3 Github buttons »

Подробнее о Flexible CSS3 toggle buttons »

Создание градиентных кнопок с использованием CSS3

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

Демонстрация работы

Что особенного в этих кнопках?

Чистый CSS: не используются изображения или Javascript.
Градиент поддерживается большинством браузеров, включая старые версии: Internet Explorer, Firefox от версии 3.6, Chrome и Safari.
Гибкость и масштабируемость: размер кнопки и закругление углов можно поменять, изменяя значение размера шрифта и внешних отступов.
Есть три состояния кнопок: обычное, при наведении указателя мыши и активное.
Может применяться к любому элементу HTML: ссылке, полю ввода, кнопке, тегу span, блоку, тексту, тегу h4 и т. п.
Обходной путь: если CSS3 не поддерживается, будет показана простая кнопка, без градиентов и теней.

Состояния кнопки

Обычное состояние — градиент с границей и стилями теней.
При наведении указателя мыши — более темный градиент.
Активное — градиент перевернут, кнопка сдвинута на 1px вниз и также более темный шрифт.

Общие стили кнопки

Следующий код — общие стили для класса .button. Мы использовали единицы em для значений свойств внутреннего отступа и скругления границы, чтобы кнопка меняла размер при изменении размера шрифта. Чтобы изменить закругление углов и размер кнопки, просто измените значение свойств border-radius, font-size и padding. Например, мы можем сделать маленькую кнопку, уменьшив размер шрифта и значение внутреннего отступа, посмотрите пример.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

Стили цветового градиента

Код ниже — это стили CSS для оранжевой кнопки. Первая строка, содержащая свойство фона, — это обходной путь для браузеров, не поддерживающих CSS3, вторая строка — для браузеров на движке Webkit, третья — для браузера Firefox и последняя — фильтр градиента для браузера Internet Explorer.

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Как можно использовать эти кнопки?

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

Сначала скопировать свойства CSS для классов .button и .blue из примера исходного кода.
После этого добавить к элементу HTML, который вы хотите сделать кнопкой, например, <a href=»#»>Button</a>. Классы CSS могут быть применены к любым элементам, таким как ссылка, текст, тег span, блок, поле ввода, кнопка и т.д.

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

Навигация, элементы форм, кнопки и ещё несколько полезностей на HTML и CSS

Здравствуйте, друзья. Это очередная и свежая подборка разных полезностей для верстальщика и дизайнера. Тут собрано несколько уроков и исходных файлов, которые выглядят очень красиво и стильно. А именно Вы тут можете встретить несколько красивых примеров типографики, которую Вы можете использовать на сайте, бесплатные уроки по созданию кнопок, а также бесплатные исходники, которые можно скачать, несколько красивых элементов форм, такие как чекбоксы и поля, и ещё самое вкусное это уроки по навигации и бесплатные их исходники.

Спасибо http://speckyboy.com и рекомендую:

Перейти

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

Веб-дизайнерам сегодня не обязательно обращаться к Photoshop для создания красивых кнопок. С CSS3 можно манипулировать всем: от фонового градиента до тени, придавать кнопкам глянцевости или других степеней блеска.

Смотрите подборку 10-ти уникальных CSS сниппетов, с помощью которых вы сможете создать красивые кнопки для своего сайта.

1. Пластиковые кнопки

See the Pen CSS3 Buttons by Benjamin (@ben_jammin) on CodePen.

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

2. Cool Buttons

See the Pen Google Buttons by Tim Wagner (@timwagner) on CodePen.

Набор классные кнопок, немного отличающихся внешне от «пластиковых». Также просты в применении. Нет сияющего пластика в дизайне, но красиво реализован «push» эффект при клике. Из 6 заранее разработанных сценариев, можно выбрать цвет или кастомиизировать на свой вкус. CSS разделен на различные классы, что позволяет установить стиль кнопок по умолчанию одним классом, а альтернативный использовать для цвета.

3. Google кнопки

See the Pen Google Buttons by Tim Wagner (@timwagner) on CodePen.

В продуктах Google (Blogger, Drive или Gmail) кнопки имеют свой отличительный цвет. В наборе: эффектные гугл-подобные кнопки на чистом CSS3.

4. Bunch-o-Buttons

See the Pen EwDar by Alan Collins (@AlanCollins) on CodePen.

Еще один пример глянцевого пластик-стиля от CodePen. Особенности кнопок в наборе: мульти-цветность с отличиями для малых, средних и больших размеров. Уникальная реализация переключений с глянцевости на flat в одном классе.

5. Социальные кнопки

See the Pen CSS social buttons and icons by Stan Williams (@Stanssongs) on CodePen.

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

6. Jelly анимация кнопки

See the Pen Jelly button by ayamflow (@ayamflow) on CodePen.

На первый взгляд обычна кнопка, но реагирует на клик очень специфичной анимацией. Помимо занимательного эффекта, впечатляет полуреалистичность тени. Меняя размер вслед за кнопкой, тень дополнительно подчеркивает действие пользователя, усиливая обратную связь. Подойдет для проекта с Call-to-Action, вроде стартапа или соц. медии.

7. Parallax кнопки

See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.

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

8. Hubspot пилюли

See the Pen Hubspot Red Pill — Blue Pill inset click buttons by Joe Henriod (@joehenriod) on CodePen.

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

Вычурный стиль hover-эффекта просто цепляет внимание

9. Кнопки в стиле Sexy

See the Pen Sexy SCSS buttons in HSB by Jeremy Thomas (@jgthms) on CodePen.

Большинство фронтэнд кодеров используют Sass/SCSS, т.к. это дает больший контроль и намного проще обычного CSS. Красивые SCSS-кнопки впечатляют своей детализацией с внутренними и внешними эффектами тени. Вы можете сменить цвет в одном классе или внести в сочетание свой оттенок. В hover состоянии кнопки выглядят как 3D, также как и при нажатии. Легко использовать для любого типа сайта и вообще можно конвертировать SCSS в CSS прямо в CodePen.

10. Кнопки в стиле Mozilla

See the Pen Single Element Mozilla-Buttons by Felix Schwarzer (@slimsmearlapp) on CodePen.

Mozilla провела основательный ребрендинг, сменив традиционно «пластиковый» стиль кнопок на своем сайте. Но вы можете украсить этими стилизованными по максимуму кнопками свой веб-ресурс. Красивые конус-формы реализованы полностью на CSS3: с фоновым градиентом и эффектом 3D фаски.

Больше стильных CSS3 кнопок

Рассмотренные 10 видов кнопок вы сможете кастомизировать в разных лейаутах. Они созданы на чистом CSS3: можно менять размер, цвет и стиль. Эти кнопки впишутся в современный проект, будь он бизнес / блоговой / соц. медиа или eCommerce тематики.

Если вы не нашли подходящий вариант для своего сайта, больший выбор красивых кнопок на CSS3 предоставит CodePen.

Онлайн генератор кнопок для сайта

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

Создать кнопку самостоятельно

Для создании кнопки с 0 на языке HTML и СSS можно использовать три тега: a, button, input.

button и input — по сути одно и тоже, на эти кнопки мы привязываем какие либо события, если мы хотим сделать кнопку ссылкой, то надо использовать тег a.

Вставив этот код на сайт мы получим простую кнопку:

Кнопка

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

Создаем красивые кнопки для сайта с помощью CSS

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

Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления и удаления классов. Иконки, которые мы используем совместно с псевдо-классами :before и :after, создали при помощи сервиса IcoMoon

Шаг 1. HTML

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

<button>Кнопка</button>

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

С использованием иконки, мы добавляем класс иконки, который будет использовать псевдо элемент :before.

Шаг 2. CSS

Теперь рассмотрим стили, мы приведем пример стилизации одной кнопки, более детально можно рассмотреть в исходниках:

.btn-6d {

border: 2px dashed #226fbe;

}

.btn-6d:hover {

background: transparent;

color: #226fbe;

}

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

Создать красивую кнопку для сайта на CSS3 онлайн

Обзор онлайн сервисов генерации кнопок для вашего сайта на чистом CSS.

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

Я встречал немало экспериментов в интернете, которые показывали значительный рост конверсии лишь только благодаря изменению дизайна кнопки.

На сегодняшний день существует достаточно много способов сделать красивые кнопки. Можно покопаться в интернете и найти готовые. Можно создать самому с помощью графического редактора Photoshop (или его аналога). Либо же воспользоваться услугами онлайн конструкторов кнопок, о которых и пойдет речь в этой статье.

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

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

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

У вас будет 2 области: 1 — в которой вы будете делать настройки, 2 – поле, где можно увидеть в реальном времени результат этих настроек.

Среди настроек:

Размер кнопки;
Размер текста;
Настройка цвета кнопки;
Скругление углов;
Создание градиента;
Фон;
Выбор шрифта;
Обводка;
Отступы;
Тень;
Оформление кнопки при наведении;
Оформление кнопки при нажатии;

Генератор кнопок Cssdrive

Очень хороший генератор кнопок с большим количеством настроек. Среди возможностей есть поворот и искажение кнопок.

Перейти на сайт

Конструктор кнопок Uiparade

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

Перейти к конструктору

Еще один очень простой онлайн генератор кнопок.

Перейти к генератору кнопок

У данного конструктора имеется множество готовых шаблонов кнопок.

Перейти на сервис

Кнопки CSS. Краткий мануал с примерами

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

Псевдоэлементы ссылок

Еще немаловажную деталь в стилях buttons css играет hover эффект – это когда курсор мыши наводится на веб-элемент и при этом действие меняются его стили. То есть, допустим, есть кнопка с красным фоном и с надписью белого цвета. Это идет вид по умолчанию, когда к кнопке не применяются какие-либо действия. Но если мы наведём стрелку мышки на наш объект, то ее стили, заданные через псевдоэлемент hover, преобразовываются в иные, к примеру, белый фон и красный текст.

Таких псевдоэлементов ссылки насчитывается всего четыре, а прописываются они через двоеточие с тегом ссылки

псевдоэлемент	Описание
a:link	Стиль ссылки, которую еще не посещали (по умолчанию)
a:visited	Стиль ссылки, которую уже посетили
a:active	Стиль ссылки во время клика по ней
a:hover	Стиль ссылки при наведение мыши на нее

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

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

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

Первым делом идет разметка HTML, то есть тег ссылки. И для лучшей определенности дадим нашему элементу класс, к примеру, wsbutton.

<a href="#">Button</a>

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

/*стиль кнопки по умолчанию*/
a.wsbutton{
    background: #3DB0F1;/*цвет фона*/
    border-radius: 3px;/*радиус скругления*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрення тень*/
    color: #ffffff;/*цвет текста*/
    display: table;/*элемент таблицы*/
    font-family: sans-serif;/*семейство шрифта*/
    font-size: 14px;/*размер текста*/
    font-weight: bold;/*жирный шрифт*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*внутрение отступы*/
    margin:0 auto;/*выравнивание по центру*/
    text-decoration: none;/*убераем подчеркивание*/
    transition: all 0.3s;/*плавный эффект перехода*/
}
/*стили кнопки при наведении курсора мыши на нее*/
a.wsbutton:hover {
    background: #EB0563;/*другой цвет фона*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*расположение тени сверху*/
}

Довольно все просто: в первом состоянии элемента (по умолчанию) задаем статичные стили. Это вид кнопки, которая будет находиться в нетронутом состоянии. Дальше для псевдоэлемента hover прописываем стили, которые будут применяться при наведении курсора мыши на нее.

Демо

Примеры кнопок CSS

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

3d кнопки

Демо Скачать Источник

Кнопки с анимацией фона

Демо Скачать Источник

Стильные hover эффекты

Демо Скачать Источник

Hover эффекты

Демо Скачать Источник

30 стилей hover эффектов

Демо Скачать Источник

Hover эффект тени

Демо Скачать Источник

Bootstrap button

Демо Скачать Источник

Кнопки с библиотекой Bootstrap

Демо Скачать Источник

Еще больше примеров здесь, здесь и здесь.

CSS3 кнопки в стиле FLAT

07 июня 2016. Категория: Готовые CSS3 кнопки

Очередная подборка CSS3 кнопок в очень популярном на сегодняшнее время стиле FLAT. Данный минималистичный стиль веб-дизайна выражает максимальную простоту, утончённость и лаконичность одновременно. В его основу ложится двумерный стиль, который веб-дизайнеры называют «плоским дизайном» (собственно говоря, слово FLAT так и переводится с английского — «плоский»)

Примеры FLAT кнопок

Рассмотрим несколько вариантов реализации FLAT кнопки, используя чистый CSS.

Пример №3

Оранжевая flat кнопка Серая flat кнопка

HTML разметка FLAT кнопок

HTML разметка у всех кнопок максимальна проста и практически одинакова, изменяются лишь классы, определяющие оформление кнопки.

/*Пример №1*/
<a href="#">Красная flat кнопка</a>
/*Пример №2*/
<a href="#">Бирюзовая flat кнопка</a>
/*Пример №3*/
<a href="#">Оранжевая flat кнопка</a>

CSS стили FLAT кнопок

Рассмотрим CSS стили каждого первого варианта кнопки из всех трех примеров.

CSS стили первого примера

.flat1 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	-webkit-user-select: none;
	border: none;
	text-align: center; //текст кнопки по центру
	outline: none;
	cursor: pointer;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #f35958; //цвет кнопки в статичном виде
	display: inline-block;
	/*Тени кнопки в статичном виде*/
	-webkit-box-shadow: 0px 3px 0px #c24746;
	-moz-box-shadow: 0px 3px 0px #c24746;
	box-shadow: 0px 3px 0px #c24746;
	}
	
.flat1:hover {
	background-color: #e65453; //цвет кнопки при наведении
	color: #fff; //цвет текста кнопки при наведении
	border: none;
	}
	
.flat1:active {
	/*Тени кнопки при нажатии*/
	-webkit-box-shadow: 0px 1px 0px #f35958;
	-moz-box-shadow: 0px 1px 0px #f35958;
	box-shadow: 0px 1px 0px #f35958;
	position: relative;
	top: 2px;
	background-color: #e65453; //цвет кнопки при нажатии
	color: #fff; //цвет текста кнопки при нажатии
	}

(adsbygoogle = window.adsbygoogle || []).push({});

CSS стили второго примера

.flat2 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	border: none;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #1ABC9C; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat2:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #20D5B1; //цвет кнопки при наведении
	border: none;
	}
	
.flat2:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #179B81; //цвет кнопки при нажатии
	border: none;
	}

CSS стили третьего примера

.flat-type3 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	color: #E57332; //цвет текста кнопки в статичном виде
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки в статичном виде
	border-radius: 5px; //скругление углов кнопки (в пикселях)
	background-color: #fff; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat3:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #E57332; //цвет кнопки при наведении
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки при наведении
	}
	
.flat3:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #FF813A; //цвет кнопки при нажатии
	border: 2px solid #FF813A; //размер и цвет рамки/обводки кнопки при нажатии
	}