Главная / Каталог скриптов для uCoz / Разное, Бесплатно

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

Добавлено 25-06-2018 в 23:25

Категория Разное, Бесплатно
Авторwaak
Просмотры779
Комментарии0
Понравилось9

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

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

Так как на сайте пока ещё мало скриптов и ещё меньше для каталога файлов то не долго думая я решил сделать простую стильную кнопку скачать для данного каталога но так как таких кнопок очень много уже есть в интернете пришлось немного подумать над тем как её оформить

И вот что получилось!

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

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

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

Установка

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

Код

.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?>

отлично не забываем сохранить

Так же хочу отметить что данная кнопка будет видна только если к материалу прикреплён файл для скачивания

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

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

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

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души