Від автора: кнопки – найважливіші компоненти будь-якої веб-сторінки, вони можуть приймати безліч різних станів і функцій, які повинні підходити під попереднє дизайнерське рішення. У цій статті ми розповімо про три способи проектування кнопок, а також покажемо спеціальні CSS інструменти і код, щоб допомогти початківцям розробникам навчитися створювати кнопки.
Спочатку нам потрібно освіжити в пам’яті кілька основних моментів з CSS кнопкам. Те, що ви розумієте різницю між Flat UI і Material Design, не має сенсу, якщо ви не знаєте, які компоненти CSS потрібно міняти. Швиденько пробіжимося по основам CSS кнопок.
Основи CSS кнопок
Для всіх сайтів гарна кнопка це поняття суб’єктивне, але існує кілька загальних нетехнічних стандартів:
Доступність – найважливіше. Люди з обмеженими можливостями і старими браузерами повинні мати простий доступ до кнопок. Відкритість інтернету для всіх і кожного це чудово, не руйнуйте її своїм ледачим кодом.
Простий текст – Всередині кнопок пишіть простий і короткий текст. Користувачі повинні відразу зрозуміти призначення кнопки і куди вона приведе.
Майже всі кнопки, які ви бачите в інтернеті, використовують якісь зміни кольорів, рамок і тіней. Зробити це можна через різні CSS псевдокласи. Ми зупинимося на двох, :hover :active. Псевдоклас :hover відповідає за поведінку CSS при наведенні курсору миші над об’єктом. :active здебільшого виконується в момент, коли користувач натиснув кнопку миші, але ще її не відпустив.
З допомогою псевдокласів можна повністю змінити зовнішній вигляд кнопки, але це не user-friendly підхід. Новачкам добре додавати невеликі зміни в основні стилі кнопки, майже повністю зберігаючи її зовнішній вигляд. В кнопках можна виділити 3 основні момент – колір, тіні і час переходу.
Основний момент 1 – Колір
Даний параметр змінюють найчастіше. Змінити колір можна за допомогою різних властивостей, найпростіші color, background-color і border. Перед показом прикладів давайте розберемо, як вибрати колір кнопки:
Комбінації кольорів – Використовуйте доповнюють один одного кольору. Colorhexa – чудовий інструмент, там ви зможете знайти поєднуються кольори. Якщо ви ще шукайте кольору, загляньте на Flat UI color picker.
Дотримуйтесь кольори палітри – Дотримуватися колірну палітру – хороша практика. Якщо ви шукайте палітри кольорів, зайдіть на lolcolors.
Основний момент 2 – Тіні
З допомогою box-shadow об’єкту можна додати тінь. Кожній стороні можна створити свою власну тінь. Ідея реалізована в обох дизайнах Flat UI і Material Design. Більш детально про властивості box-shadow можна почитати на MDN box-shadow docs.
Основний момент 3 – Час плавного переходу
Властивість transition-duration додає до ваших CSS змін тимчасову шкалу. В кнопці без часу плавного переходу стилі моментально змінюються стилі псевдокласу :hover, що може відштовхнути користувача. У цьому керівництві багато кнопок використовують час переходу для того, щоб кнопки виглядали натуральніше. У прикладі нижче в стані :hover стилі кнопки змінюються повільно (за 0.5 секунди):
.color-change {
border-radius: 5px;
font-size: 20px;
padding: 14px 80px;
cursor: pointer;
color: #fff;
background-color: #00A6FF;
font-size: 1.5 rem;
font-family: ‘Roboto’;
font-weight: 100;
border: 1px solid #fff;
box-shadow: 2px 2px 5px #AFE9FF;
transition-duration: 0.5 s;
-webkit-transition-duration: 0.5 s;
-moz-transition-duration: 0.5 s;
}
.color-change:hover {
color: #006398;
border: 1px solid #006398;
box-shadow: 2px 2px 20px #AFE9FF;
}
А виглядає це так:
Код для плавних переходів складний, і старі браузери трохи по-різному виконують анімацію. Тому нам потрібно додати вендорные префікси для старих браузерів:
transition-duration: 0.5 s /* Звичайна запис, працює у всіх сучасних браузерах */
-webkit-transition-duration: 0.5 s; /* Допомагає деякими версіями safari, chrome і android */
-moz-transition-duration: 0.5 s; /* для firefox */
Є безліч складних і цікавих способів змінити поведінку властивості transition, демо вище лише показали основні моменти.
Три стилю кнопок
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 – Кнопки Flat UI
Flat UI робить упор на мінімалізм – більше дій, менше рухів. Як правило, я переходжу з просто чорно-білих кнопок на 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 {
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;
}
У 3 кнопки стану: звичайне (без стану), :hover :active. Зверніть увагу, що стан :hover містить всього один рядок із зменшенням прозорості. Корисний трюк – кнопка стає трохи світліше, і вам не потрібно підбирати більш світлий колір.
Змінні в CSS вже не сама нова функція, але деякі з них тут використовуються по-іншому. Замість того, щоб вказати суцільну рамку border, тут вказуються властивості border-bottom, border-left border-right, які створюють 3D ефект глибини. Псевдоклас :active часто використовується в Flat UI. Коли наша кнопка стає :active відбувається 2 речі:
:border-bottom змінюється з 3px до 1px. Тінь під кнопкою зменшується, а кнопка опускається на кілька пікселів. Начебто просто, але так користувач відчуває, що він «втиснув» кнопку сторінку.
Зміна кольору. Фон темніє, імітуючи зміщення кнопки від користувача до екрану. І знову, такий простий ефект показує користувачеві, що він натиснув кнопку.
Під Flat UI цінуються прості і мінімалістичні руху кнопок, «розповідають велику історію». Багато імітує зрушення кнопки з допомогою :border-bottom. Варто також сказати, що під Flat UI є кнопки, які взагалі не рухаються, а лише змінюють колір.
3 — Material Design
Material Design – стиль дизайну, який просуває ідею передачі інформації у вигляді карток з різною анімацією для залучення уваги. Material Design створив Google, на сторінці Material Design Homepage вони описали 3 основних принципи:
Слово Матеріальний не перекладається буквально, це метафора
Монотонність, графіка, агресивність
Значення передається за допомогою рухів
Щоб краще зрозуміти 3 цих принципу, погляньте на демо MD нижче:
Ці кнопки використовують дві основні ідеї – властивість box-shadow і Polymer. Polymer – фреймворк компонентів та інструментів для створення, спрощує процес проектування веб-сайтів. Якщо ви працювали з Bootstrap, Polymer не сильно відрізняється. Ефект розповсюджується хвилі на кнопках вище додається всього одного рядка коду.
/*ось цей рядок додає ефект */
— компонент Polymer. Підключивши фреймворк на самому початку HTML коду, ми отримуємо доступ до його компонентів. Детальніше ознайомитись можна на головній сторінці Polymer project. Ми розібралися з тим, що таке polymer, і як отримати ефект хвилі (як він працює це тема для іншої статті), тепер поговоримо про CSS код, який ефект підстрибування виконує описані вище принципи.
body {
background-color: #f9f9f9;
font-family: RobotoDraft, ‘Helvetica Neue’;
}
/* Кнопка */
.button {
display: inline-block;
position: relative;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9 em;
background-color: #fff;
color: #646464;
margin: 20px 10px;
transition: 0.2 s;
transition-delay: 0.2 s;
box-shadow: 2px 0 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;
}
/* Інше */
.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. Давайте видалимо весь незмінний CSS код і подивимося, як box-shadow змінюється і взагалі працює:
.button {
transition: 0.2 s;
transition-delay: 0.2 s;
box-shadow: 2px 0 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 використовується для додавання тонкої темної тіні зліва і знизу біля кожної кнопки. По кліку тінь трохи збільшується і стає світліше – імітується ефект 3D тіні під кнопкою, коли кнопка ніби підстрибує від сторінки до користувача. Це рух прописано в стилях Material Design і його принципи. Кнопки в стилі Material Design можна створити з допомогою Polymer і box-shadow ефектів.
Слово матеріальний – метафора – з допомогою властивості box-shadow ми імітуємо ефект 3D тіні, створюємо аналог цієї тіні.
Монотонність, графіка, агресивність – більше відноситься до яскраво-блакитним і зеленим кнопок і до іншим, дотримуються даний принцип.
Значення передається за допомогою рухів – З допомогою Polymer і анімації властивості box-shadow ми можемо створювати безліч різних рухів, коли користувач клацає на кнопку.
У статті описано, як створювати кнопки з трьома різними методологіями. Якщо ви хочете спроектувати свій власний дизайн кнопок, рекомендую скористатися сервісом CSS3 Button Generator.
Висновок
Чорно-білі кнопки досить прості і зрозумілі. Змініть кольори, на кольори ваших улюблених брендів і ви отримаєте кнопки для вашого сайту. Flat UI кнопки теж прості: маленькі руху і кольору «розповідають велику історію». Material Design для залучення уваги користувачів імітує великомасштабні складні рухи, як реальна тінь.
Сподіваюся, це керівництво допомогло новачкам в CSS розібратися з будівельними цеглинками, які роблять кнопки популярними і дуже потужними компонентами веб-сторінки.
