Css как создать кнопки

Как сделать кнопку в 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 »

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

Источник

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник