форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
25-06-2018 в 23:25 284

Кнопка скачать с анимацией для каталога файлов


Кнопка скачать с анимацией для каталога файлов
Всем привет! Сегодня было много дел менял скрипты вносил правки на сайт но при этом я всё таки нашёл время что бы написать маленький скрипт для публикации
Так как на сайте пока ещё мало скриптов и ещё меньше для каталога файлов то не долго думая я решил сделать простую стильную кнопку скачать для данного каталога но так как таких кнопок очень много уже есть в интернете пришлось немного подумать над тем как её оформить
И вот что получилось!

Вид кнопки по умолчанию


Вид кнопки при наведении


Как можно видеть на картинке выше при наведении на кнопку возле неё появляется доп информация
Размер архива и количество скачиваний

Установка


Для начало установим стили данной кнопки для этого нам нужно перейти в Админ панель Управление дизайном Таблица стилей и в самый её конец добавить код ниже

Код
.cnopaz {position: relative;margin: 40px 70px;}
  .cnopaz a {
  display: inline-block;
  padding: 10px 20px;
  background: #2dc108;
  color: #FFF;
  border-radius: 5px;
}

.cnopanumz {
  position: absolute;
  z-index: 2;
  color: #333;
  font-size: 0px;
  left: 30px;
}
.cnopanumves {
  position: absolute;
  z-index: 2;
  color: #333;
  font-size: 0px;
  bottom: 0px;
  left: 0;
}

.cnopaz a:hover .cnopanumz {
  font-size: 13px;
  top: -20px;
  left: 0;
  transition: 1s;
}
.cnopaz a:hover .cnopanumves {
  font-size: 13px;
  left: -50px;
  bottom: 5px;
  transition: 1s;
}

.cnopanumves:before, .cnopanumz:before {
  top: -10px;
  content: "";
  display: block;
  position: absolute;
  background-color: #2dc108;
  border-radius: 5px;
}

.cnopaz a:hover .cnopanumz:before {
  left: 0;
  width: 10px;
  height: 10px;
}

.cnopaz a:hover .cnopanumves:before {
  right: 0;
  width: 20px;
  height: 20px;
  top: -25px;
}
отлично не забываем сохранить
Теперь установим сому кнопку для этого перейдём в Админ панель Управление дизайном Каталог файлов Страница материала и комментариев к нему и по месту где хотим видеть кнопку добавляем код ниже

Код
<?if($FILE_URL$)?><div class="cnopaz">
<a href="$FILE_URL$">
  <span class="cnopanumz">$LOADS$ загрузок</span>
  <span class="cnopanumves">$FILE_SIZE$</span>
  Скачать</a>
</div><?endif?>
отлично не забываем сохранить
Так же хочу отметить что данная кнопка будет видна только если к материалу прикреплён файл для скачивания


7

Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

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

Автор


Похожие материалы

Реклама



Дополнение

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

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

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru