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

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

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

скачать исходникидемо

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

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

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

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

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

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

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

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

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

HTML

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

<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;
}

Также:

Скругленные углы сделаны с помощью свойства 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;
}

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

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

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

border: 1px solid #fff;

Вот и все, что я хотел вам рассказать. Я надеюсь, что данная обучающая статья оказалась для вас в какой-то степени полезной.

Автор: Jacob Gube

Источник: http://sixrevisions.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree