Обновление (9 июля 2016 г.): эта статья была обновлена и теперь содержит теги <button> а не якорные теги для соответствия современным рекомендациям по доступности. Если вы работаете с кнопками, всегда придерживайтесь <button> .
Кнопки являются одним из наиболее важных компонентов любой веб-страницы, и у них есть много различных состояний и функций, которые все должны правильно соответствовать предыдущим проектным решениям. В этой статье мы рассмотрим три подхода к дизайну кнопок, а также CSS-код и инструменты, помогающие новым разработчикам создавать свои собственные кнопки.
Прежде чем мы углубимся в различные способы мышления кнопок, нам нужно закрепить некоторые основы CSS-кнопок. Знание идеологической разницы между Flat UI и Material Design не имеет значения, если вы не знаете, какие компоненты CSS меняются.
Давайте быстро ознакомимся с основами кнопок CSS.
Основы CSS кнопок
Определение хорошей кнопки субъективно для каждого веб-сайта, но существует несколько нетехнических стандартов:
- Доступность — это первостепенно. Кнопки должны быть легко доступны для людей с ограниченными возможностями и старых браузеров. Открытость сети прекрасна, не портите ее ленивым CSS.
- Простой текст — делайте текст внутри кнопок коротким и простым. Пользователи должны быть в состоянии сразу понять назначение кнопки и ее назначение.
Почти все кнопки, которые вы видите в Интернете, будут использовать некоторые вариации изменения цвета, времени перевода, а также изменения границ и теней. Они могут быть использованы с использованием различных псевдоклассов CSS. Мы сосредоточимся на двух из них — :hover и :active . Псевдокласс :hover определяет, как CSS должен меняться, когда ваша мышь наводит курсор на объект. :active чаще всего выполняется между моментом, когда пользователь нажимает кнопку мыши и отпускает ее.
Можно изменить полное отображение кнопки с помощью псевдоклассов, но это не удобный для пользователя подход. Хорошей стратегией для начинающих является добавление небольших или простых изменений в основы кнопок, сохраняя при этом кнопку знакомой. Три основные основы кнопок — это цвет , тень и время перевода .
Фундаментальный 1 — Цвет
Это самое распространенное изменение. Мы можем изменить цвет множества свойств, самыми простыми из которых являются свойства color , background-color и border . Прежде чем перейти к примерам, давайте сначала сосредоточимся на том, как выбирать цвета кнопок:
- Цветовые комбинации — используйте цвета, которые дополняют друг друга. Colorhexa — отличный инструмент для определения того, какие цвета работают вместе. Если вы все еще ищете цвета, проверьте палитру цветов Flat UI .
- Подберите свою палитру. Как правило, это хорошая идея, чтобы соответствовать любой цветовой палитре, которую вы уже используете. Если вы все еще ищете цветовую палитру, проверьте Lolcolors .
Основное 2 — Тень
box-shadow позволяет добавить тень вокруг объекта. К каждой стороне можно добавить уникальные тени, эта идея поддерживается как в плоском пользовательском интерфейсе, так и в дизайне материалов. Чтобы узнать больше о box-shadow , ознакомьтесь с документами MDN box-shadow .
Основное 3 — Продолжительность перехода
transition-duration позволяет вам добавлять временные рамки к вашим изменениям CSS. Кнопка без времени перехода изменится на ее :hover CSS, что может быть неудобно для пользователя. Многие кнопки в этом руководстве используют время перевода, чтобы чувствовать себя естественно.
В следующем примере стиль кнопки плавно (более 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 { color: #006398; border: 1px solid #006398; box-shadow: 2px 2px 20px #AFE9FF; }
Это выглядит так:
Код, выполняющий переходы, сложен, поэтому старые браузеры обрабатывают переходы немного по-другому. Из-за этого нам нужно включить префиксы вендоров для старых браузеров.
transition-duration: 0.5s /* this is standard and works on most modern browsers */ -webkit-transition-duration: 0.5s; /* helps some versions of safari, chrome, and android */ -moz-transition-duration: 0.5s; /* helps firefox */
Удаление стилей кнопок по умолчанию
Чтобы убрать стили браузера по умолчанию от элементов <button> чтобы мы могли предоставить им пользовательские стили, мы включили следующий CSS:
button.your-button-class { -webkit-appearance: none; -moz-appearance: none; }
Однако лучше всего применять это к классам элементов вашей кнопки, а не к каждой кнопке по умолчанию.
Есть много сложных и интересных способов изменить то, как transition меняет ваш CSS, этот освежитель только что охватил основы.
Три стиля кнопок
1 — Простой черный и белый
Обычно это первая кнопка, которую я добавляю в свои сторонние проекты, потому что ее простота работает с огромным разнообразием стилей. Этот стиль использует естественный идеальный контраст черного и белого.
Эти два варианта похожи, поэтому мы просто рассмотрим код черной кнопки с белым фоном. Чтобы получить другую кнопку просто переверните каждый 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 { color: black; background-color: white; transition-duration: .2s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; }
В приведенных выше стилях вы увидите, что font и background-color меняются в течение transition-duration в .2s . Это действительно простой пример. Чтобы строить отсюда, вы можете использовать цвета ваших любимых брендов в качестве вдохновения. Хороший способ найти такие фирменные цвета — это BrandColors .
2 — Плоские кнопки интерфейса
Плоский пользовательский интерфейс фокусируется на минимализме и рассказывает большую историю маленькими движениями. Я обычно перехожу с черно-белых кнопок на плоские интерфейсы, когда мои проекты начинают обретать форму. Плоские кнопки интерфейса достаточно минимальны, чтобы вписаться в большинство дизайнов.
Давайте улучшим нашу кнопку из предыдущих, добавив движение кнопки для имитации кнопки 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 { width: 100px; background: #18B495; border-bottom: #16a085 1px solid; border-left: #16a085 1px solid; border-right: #16a085 1px solid; border-radius: 6px; text-align: center; color: white; padding: 10px; margin-top: 3px; float: left; }
У этой кнопки есть три состояния: обычное (без имени штата) :hover и :active .
Примечательно, что :hover содержит только одну строку кода, которая снижает непрозрачность. Это полезный трюк, который заставляет кнопку казаться светлее, не требуя, чтобы вы нашли новый, на самом деле, светлый цвет.
Переменные CSS не новы, но некоторые из них используются по-новому. Вместо того, чтобы иметь border виде сплошной однородной линии, для создания трехмерного эффекта глубины используются border-bottom , border-left и border-right .
Плоские рычаги пользовательского интерфейса :active активно. Когда кнопка нашего примера становится :active происходят две вещи :active
-
:border-bottomизменяется от3pxдо1px. Это приводит к уменьшению тени под кнопкой и уменьшению всего объекта кнопки на пару пикселей. Это простое изменение помогает пользователю чувствовать, что он нажимает кнопку на странице. - Цвета меняются. Цвета фона темнеют, имитируя физическое движение от пользователя к странице. Опять же, это небольшое изменение напоминает пользователю, что он нажимает кнопку.
Плоские кнопки пользовательского интерфейса ценят простые и минимальные движения, которые рассказывают большие истории. Многие используют :border-bottom для создания поверхностного движения. Стоит отметить, что некоторые кнопки Flat UI вообще не двигаются и используют только изменения цвета.
3 — Материал Дизайн
Material Design — это дизайн мышления, который продвигает информационные карточки с помощью движений, привлекающих внимание. Google разработал идею «Material Design» и перечислил три основных принципа на главной странице Material Design :
- Материал это метафора
- Жирный, графический, преднамеренный
- Движение дает смысл
Чтобы получить лучшее представление об этих трех принципах, давайте посмотрим на Material Design в действии.
Примечание редактора: этот пример не содержит <button> как он соответствует разметке Polymer по умолчанию для кнопок, однако, если вы реализуете Polymer в большом проекте, стоит изучить использование кнопок, а не тегов привязки в вашей реализации. Мы рассмотрим это более подробно в следующем посте.
Эти кнопки используют две основные идеи — box-shadow и Polymer .
Polymer — это набор компонентов и инструментов, созданных для разработки веб-сайтов. Если вы знакомы с Bootstrap, Polymer очень похож. Мощный волновой эффект, описанный выше, добавляется с помощью одной строки кода.
<div class="button"> <div class="center" fit>SUBMIT</div> <paper-ripple fit></paper-ripple> /*this is the line that adds a ripple effect with polymer */ </div>
<paper-ripple fit></paper-ripple> является компонентом Polymer. Импортируя Polymer в начале нашего HTML, мы получаем доступ к популярной платформе и ее компонентам. Узнайте больше на домашней странице проекта Polymer .
Теперь, когда мы понимаем, что такое полимер и откуда взялась рябь (как это работает, это история для другого дня), давайте поговорим о 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 { text-align: center; }
Эти кнопки используют box-shadow для большей части их дизайна. Давайте посмотрим, как box-shadow меняется и работает своим волшебством, удаляя любой CSS, который не меняется:
.button { transition: 0.2s; transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .button:active { transition-delay: 0s; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); }
box-shadow используется для нанесения тонкой темной тени слева и снизу каждой кнопки. При щелчке тени растягиваются дальше и становятся менее темными. Это движение имитирует трехмерную тень кнопки, которая прыгает со страницы к пользователю. Это движение является частью стиля Material Design и его принципов в действии.
Можно создать кнопки Material Design, комбинируя Polymer с эффектами box-shadow .
- Материал — это метафора — используя
box-shadowмы можем имитировать трехмерные тени, как они бы выглядели на объектах реального мира. - Жирный, графический, преднамеренный — это более справедливо для ярко-синих и зеленых кнопок, и те выполняют это полностью.
- Движение дает смысл — с помощью переходов Polymer и
box-shadowмы можем создать много движения, когда пользователь нажимает кнопку.
В этой статье рассказывается, как сделать кнопки с тремя различными методологиями дизайна. Если вы хотите создать собственный дизайн кнопок, я рекомендую использовать генератор кнопок CSS3 .
В заключение
Черно-белые кнопки надежны и просты. Замените черный и белый на фирменные цвета для быстрой кнопки, соответствующей вашему сайту. Плоские кнопки пользовательского интерфейса просты и используют небольшие движения и цвета, чтобы рассказывать большие истории. Кнопки Material Design используют масштабные сложные движения, имитирующие тени реального мира, чтобы привлечь внимание пользователя.
Надеемся, что это руководство поможет новичкам в CSS понять строительные блоки, которые делают кнопки настолько мощными и творчески распространенными.