Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Кнопка Google Material Design

Дата и время публикации : 21.Дек.17 в 01:23 | Раздел : Кнопки для uCoz


Параметр Значение
Дата публик. 21.Дек.17, Четверг, 01:23
Адапт. дизайн
Обновления Не производились
Просмотрен 49

Интересная кнопка в стиле Material Design которая прячется при прокрутки вниз и появляется при прокрутки вверх. Можно использовать где угодно и как угодно, кнопка впишется абсолютно в любую тематику сайта и дизайн. При необходимости стиль кнопки можно настроить под себя.

Установка :

1. Туда где нужна кнопка :

 <div class="menu_br">
  <div class="menu_drop">
  <a href="http://kanavas.at.ua/"><div class="menu_btn">
  <span class="menu_label">Kanavas</span>
  <i class="absolute-center fa fa-pencil"></i>
  </div></a>
 </div>
 </div>


2. Добавляем скрипт :

<script type="text/javascript">  
  $(function(){
   
  var _top = $(window).scrollTop(),
  _direction,
  $menu_drop = $('.menu_drop');
   
  $(window).scroll(function(){
  var _cur_top = $(window).scrollTop();
   
  if(_top < _cur_top) {
  _direction = 'down';
  $menu_drop.stop().addClass('hide_top');
  }
  else {
  _direction = 'up';
  $menu_drop.removeClass('hide_top');
  }
   
  _top = _cur_top;
  console.log(_direction);
  });
  });
  </script>


3. А теперь стилизуем это все :

 .absolute-center {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 20px;height: 20px;text-align: center; font-size: 18px!important; color: #fff;}
 .menu_br {position: fixed;bottom: 0px;right: -15px;}
 .menu_drop {position: absolute;bottom: 15px;right: 30px;-webkit-transition:-webkit-transform 0.7s .3s ease;-moz-transition: -moz-transform 0.7s .3s ease;-ms-transition: -ms-transform 0.7s .3s ease;transition: transform 0.7s .3s ease;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0px, 0px, 0px);}
 .menu_br, .hide_top{-webkit-transform: translate(0, 200%);-moz-transform: translate(0, 200%);-ms-transform: translate(0, 200%);transform: translate(0, 200%);-webkit-backface-visibility: hidden;}
 .menu_btn {position: relative;width: 45px;height: 45px;float: right;cursor: pointer;background-color: #3080e8;border-radius: 50%;box-shadow: 0 4px 8px rgba(0,0,0,.25);}
 .menu_btn:hover .menu_label {opacity: 1;}
 .menu_label {position: absolute;top: 14px;right: 115%;padding: 4px 8px;font-size: 14px;color: #fff;background-color:rgba(48, 128, 232, 0.7);border-radius:50px;opacity: 0;pointer-events: none;white-space: nowrap;transition: opacity .2s ease-out;}


Вот и все.

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

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

Вход Регистрация

Смотрите также :

Шаблон Premium для блога uCoz

Отличный шаблон для системы uCoz, выполнен аккуратно и в светлых тонах. Данный шаблон отлично подойдет для ведения собственного блога на любую тема...