Полупрозрачные кнопки

Дата публикации: 2015-04-13

От автора: В этой статье вы узнаете о том, как создаются полупрозрачные кнопки для пользовательского интерфейса, которые очень хорошо выглядят на фоне фотографий.

Почему полупрозрачные кнопки?

Использование фотографий в качестве фона является сейчас «горячим» трендом в веб-дизайне. Вместе с этим в веб-дизайне стало модно использовать «кнопки-призраки», которые выглядят вот так:

Поскольку у данных кнопок полностью прозрачный фон, они не отвлекают внимание пользователей от фона с фотографией, в отличие от традиционных веб-кнопок, имеющих сплошной фон.

Проблема «кнопок-призраков» заключается в том, что они слишком незаметные по сравнению с фоном, для которого используются фотографии. Поэтому посетители сайта могут не придать им нужного значения из-за небольшой визуальной «весомости».

А также «кнопки-призраки» могут быть приняты просто за выделенный текст. Другими словами, они не всегда могут показаться «кликабельными» для пользователей. Это основные проблемы с их использованием в плане юзабилити.

С другой стороны, «кнопка-призрак» классно смотрится на фоне фотографий благодаря своей прозрачности. Как же нам сохранить это преимущество «кнопки-призрака» и одновременно показать ее предназначение (аффорданс)?

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

Это отличный компромисс между «кнопкой-призраком» и традиционной кнопкой со сплошным фоном. Благодаря полупрозрачному фону некоторые фотографии просвечивают сквозь подобные кнопки, создавая привлекательный эффект, похожий на эффект от использования «кнопок-призраков».

Классическая форма кнопки визуально сигнализирует о том, что полупрозрачная кнопка является кликабельной. Полупрозрачные кнопки очень легко создаются. Все, что нам нужно, – это немного HTML и CSS.

HTML

В разметке нам потребуется только один HTML элемент. В данном случае используется элемент <a>.

<a class="semi-transparent-button" href="#">Button</a>

1	<a class="semi-transparent-button" href="#">Button</a>

В качестве замены вы можете использовать элементы 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.3s ease-out;
}

.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.3s 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.5s ease-in;
}

.semi-transparent-button:hover,

.semi-transparent-button:focus,

.semi-transparent-button:active {

background: #fff;

color: #000;

transition: all 0.5s ease-in;

}

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

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

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

Другой техникой увеличения видимости полупрозрачной кнопки является использование сплошной рамки. Это может быть реализовано путем простого добавления для кнопки свойства border.