1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Кнопка скачать с анимацией для каталога файлов

Автор
waak
написать автору
пожаловаться
ID материала № 49
Авторwaak
CMSuCoz
Просмотров 240
Добавлено 25.06.2018
Комментариев 0

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

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

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


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


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

Установка


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

Код
.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?>
отлично не забываем сохранить
Так же хочу отметить что данная кнопка будет видна только если к материалу прикреплён файл для скачивания

0 5
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация