Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Прозрачная кнопка css стилями: идем в ногу со временем и следуем современным трендам

Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка css свойствами.

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

А вот и прародитель дизайна!

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

Apple - прародитель прозрачности

Следующей его использовала компания Apple для представления кнопок в интерфейсах браузера Safari и операционной системы iOS. По сути именно благодаря Apple прозрачные объекты стали модными. На сегодняшний день все прибыльные коммерческие сервисы используют данную технологию.

Особенности «кнопки призрака»

Из-за своего внешнего вида полупрозрачный button стали называть «кнопкой призраком». И действительно, особенностями такого объекта являются:

  • Тонкая контурная линия;
  • Преобладание черно-белой палитры цветов;
  • Прозрачный фон;
  • Масштаб больше стандартного.

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

Плюсы Минусы
·       Использование минимального количества css-свойств, украшений и отвлекающих анимаций;

·       Простота и лаконичность;


·       Отлично привлекает внимание пользователей при правильном использовании;

·       Не отвлекает от важного контента.
·       При неумелом использовании может стать незаметной на ярком фоне;

·       В некоторых случаях пользователь может быть дезориентирован.

Пример прозрачной кнопки

Прозрачная кнопка пример

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

Не волнуйтесь, в программном коде нет ничего сложного. Все это мы уже разбирали в предыдущих публикациях. На сайте создано две прозрачные кнопки с плавным эффектом перехода.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset=utf-8" />
  <title>Пример сайта с призрачной кнопкой</title>
  <style type="text/css">
  BODY {
  background: url(http://modoza.ru/mail_images/menu/rasprodazha-menu.png) no-repeat;
  background-size:100%
  }
a.b-ghost {
  display: block;
  margin-top:45px;
  width: 350px;
  padding: 15px;
  color: 	#1C1C1C;
  font-weight: bold;
  font-family: Arial Unicode MS, sans-serif;
  border: 3px solid 	#363636;
  text-align: center;
  outline:  1px solid #828282;
  text-decoration: none;
  transition: background-color 0.8s ease-in-out,
              color 0.8s ease-in-out;
}
.b-ghost:hover,.b-ghost:active {
  background-color: #363636;
 border: 3px solid 	#CFCFCF;
  color: #CFCFCF;
  transition: background-color 0.6s ease-in-out,
              color 0.6s ease-in-out;
}
  </style>
  </head>
  <body>
  <div >
<a class="b-ghost" href="#">Мужская одежда</a>
   <a class="b-ghost" href="#">Женская одежда</a> 
  </div>
  </body>
</html>

Надеюсь статья вооружила вас новыми знаниями и была полезной. А вы не забывайте, что я с нетерпением жду ваших заявок на подписку! И конечно же делитесь ссылкой на мой блог со своими коллегами и друзьями.

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 71 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: