Кнопки

Простой CSS для кнопок

Кнопки по умолчанию

Чтобы создать кнопки Pure, добавьте класс pure-button к элементам <a> или <button>.

Кнопка Pure
<a class="pure-button" href="#">Кнопка Pure</a>
<button class="pure-button">Кнопка Pure</button>

Неактивные кнопки

Чтобы сделать кнопку неактивной, добавьте класс pure-button-disabled после pure-button.

Неактивная кнопка
<a class="pure-button pure-button-disabled" href="#">Неактивная кнопка</a>
<button class="pure-button pure-button-disabled">Неактивная кнопка</button>

Активные кнопки

Чтобы придать кнопке виду уже нажатой и зафиксированной в нажатом положении, добавьте класс pure-button-active после pure-button.

Активная кнопка
<a class="pure-button pure-button-active" href="#">Активная кнопка</a>
<button class="pure-button pure-button-active">Активная кнопка</button>

Основная кнопка

Чтобы показать, что нажатие на конкретную кнопку представляет собой первичное действие, добавьте класс pure-button-primary вместе с классом pure-button.

Основная кнопка
<a class="pure-button pure-button-primary" href="#">Основная кнопка</a>
<button class="pure-button pure-button-primary">Основная кнопка</button>

Настройка кнопок

Благодаря минимальным стилям фреймворка Pure, несложно, основываясь на кнопках Pure, создавать собственные кнопки для собственного дизайна.

Чтобы настроить стили кнопок, необходимо обернуть пользовательский CSS в класс, например button-foo, который затем можно добавить к элементу кнопки вместе с классом pure-button. Вот несколько примеров.

Цветные кнопки со скруглёнными углами

<div>
	<style scoped>

		.button-success,
		.button-error,
		.button-warning,
		.button-secondary {
			color: white;
			border-radius: 4px;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
		}

		.button-success {
			background: rgb(28, 184, 65); /* это зелёный */
		}

		.button-error {
			background: rgb(202, 60, 60); /* это тёмно-бордовый */
		}

		.button-warning {
			background: rgb(223, 117, 20); /* это оранжевый */
		}

		.button-secondary {
			background: rgb(66, 184, 221); /* это светло-голубой */
		}

	</style>

	<button class="pure-button button-success">Успешнаый результат</button>
	<button class="pure-button button-error">Ошибка</button>
	<button class="pure-button button-warning">Предупреждение</button>
	<button class="pure-button button-secondary">Второстепенная кнопка</button>
</div>

Кнопки разных размеров

<div>
	<style scoped>

		.button-xsmall {
			font-size: 70%;
		}

		.button-small {
			font-size: 85%;
		}

		.button-large {
			font-size: 110%;
		}

		.button-xlarge {
			font-size: 125%;
		}

	</style>

	<button class="pure-button button-xsmall">Очень маленькая кнопка</button>
	<button class="pure-button button-small">Маленькая кнопка</button>
	<button class="pure-button">Обычная кнопка</button>
	<button class="pure-button button-large">Большая кнопка</button>
	<button class="pure-button button-xlarge">Очень большая кнопка</button>
</div>

Кнопки с иконками

В составе фреймворка Pure нет поддержки иконичных шрифтов, но он легко уживается с существующими CSS-библиотеками. Встроить иконку в тело кнопки очень легко. В приведённом ниже примере использована иконка из коллекции Font Awesome. Подключите на странице файл стилей Font Awesome CSS file и используйте элемент <i> внутри контейнера с классом pure-button.

Контроль
<button class="pure-button">
	<i class="icon-cog"></i>
	Настройки
</button>

<a class="pure-button" href="#">
	<i class="icon-shopping-cart icon-large"></i>
	Контроль
</a>