• pda
  • 20.08.2018

  • 16:09

  • 34

  • 0

Кнопка скачать с анимацией

0.0

Проголосовало

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


Так же хочу отметить что данная кнопка будет видна только если к материалу прикреплён файл для скачивания
Порядок установки: Всем привет! Сегодня было много дел менял скрипты вносил правки на сайт но при этом я всё таки нашёл время что бы написать маленький скрипт для публикации
Ссылка
BB-Code
HTML-код
:)