Напівпрозорі кнопки

16

Від автора: У цій статті ви дізнаєтеся про те, як створюються напівпрозорі кнопки для користувацького інтерфейсу, які дуже добре виглядають на тлі фотографій.

Напівпрозорі кнопкиНапівпрозорі кнопки

Чому напівпрозорі кнопки?

Використання фотографій в якості фону є зараз «гарячих» трендом у веб-дизайні. Разом з цим у веб-дизайні стало модно використовувати «кнопки-привиди», які виглядають ось так:

Напівпрозорі кнопки

Оскільки у даних кнопок повністю прозорий фон, вони не відволікають увагу від фону з фотографією, на відміну від традиційних веб-кнопок, які мають суцільний фон.

Проблема «кнопок-примар» полягає в тому, що вони занадто непомітні порівняно з фоном, для якого використовуються фотографії. Тому відвідувачі сайту можуть не надати їм потрібного значення з-за невеликий візуальної «вагомості».

А також «кнопки-примари» можуть бути прийняті просто за виділений текст. Іншими словами, вони не завжди можуть здатися «клікабельними» для користувачів. Це основні проблеми з їх використанням в плані юзабіліті.

З іншого боку, «кнопка-привид» класно виглядає на тлі фотографій завдяки своїй прозорості. Як же нам зберегти цю перевагу «кнопки-примари» і одночасно показати її призначення (аффорданс)?

Я виявив гарне рішення на головній сторінці сайту Tumblr. На сайті Tumblr використовується напівпрозора кнопка для авторизації поверх фону з зображенням:

Напівпрозорі кнопки

Це відмінний компроміс між «кнопкою-привидом» і традиційної кнопкою з суцільним фоном. Завдяки напівпрозорому фону деякі фотографії просвічують крізь подібні кнопки, створюючи привабливий ефект, схожий на ефект від використання кнопок-привидів».

Класична форма кнопки візуально сигналізує про те, що напівпрозора кнопка є клікабельним. Напівпрозорі кнопки дуже легко створюються. Все, що нам потрібно, – це трохи HTML і CSS.

HTML

В розмітці нам буде потрібно тільки один HTML елемент. В даному випадку використовується елемент .

Button

В якості заміни ви можете використовувати елементи button або input.

CSS

CSS властивість, що відповідає за напівпрозорий візуальний ефект, є властивість background. Властивості background присвоєно значення в RGBA, щоб можна було контролювати прозорість. Колір фону білий і на 50% прозорий.

.semi-transparent-button {
display: block;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
width: 80%;
max-width: 200px;
background: #fff; /* запасний колір для старих браузерів */
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
color: #fff;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
transition: all 0.3 s ease-out;
}

Також:

Округлені кути зроблені за допомогою властивості border-radius

Властивість text-align використовується для вирівнювання назви кнопки по центру (що є типовим для кнопок)

Властивість max-width встановлено в значенні 200px, щоб кнопка не ставала занадто широкою на дуже великих екранах.

Простий анімаційний ефект, що виникає при взаємодії користувача з кнопкою, створений за допомогою властивості transition

Додатково, в якості запасного варіанту використовується суцільний колір тла, записаний у вигляді шістнадцяткового значення (hex) для браузерів, які не розуміють rgba() (наприклад, Internet Explorer 8 і нижче).

Щоб поліпшити аффорданс кнопки, нам потрібно задати певні стилі псевдо-класів :hover, :focus :active. Коли користувач буде наводити на кнопку або клікати по ній, ми будемо використовувати перехід від напівпрозорого фону до суцільного, щоб продемонструвати, що з кнопкою миші можна взаємодіяти.

.semi-transparent-button:hover,
.semi-transparent-button:focus,
.semi-transparent-button:active {
background: #fff;
color: #000;
transition: all 0.5 s ease-in;
}

Однією з технік з посилення візуальної «вагомості» напівпрозорої кнопки є використання більш «живого» фонового кольору. Чисто білий колір є нейтральним, тому в нашому демо-прикладі ви побачите також синю кнопку в якості альтернативи. Код для синьої напівпрозорої кнопки буде таким:

background: rgba(30, 52, 142, 0.5);

Іншою технікою збільшення видимості напівпрозорої кнопки є використання суцільний рамки. Це може бути реалізовано шляхом простого додавання кнопки властивості border.

border: 1px solid #fff;

Ось і все, що я хотів вам розповісти. Я сподіваюся, що ця повчальна стаття виявилася для вас якоюсь мірою корисною.