» »

Скрипт кнопки с эффектом скачать с сайта

Скрипт кнопки с эффектом скачать с сайта

Вы теперь можете заменить на красивые кнопки на каталоги файлов, чтоб скачать. Также вы можете настроить под свой дизайн сайта. Это если мы говорим о каталоге файлов, то там убираем скрипт, который идет по умолчанию и на его место ставим тот что представлен в этом материале. Или просто устанавливаем в том месте, где вы хотите его видеть.

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

Здесь идет стиль, что настраиваем как вообще они будут смотреться, в таком случай можно поставить как на светлый интернет ресурс, так и на темный. Или вообще сразу вывести по умолчанию к примеру зеленый цвет, а когда кликом наведете, то сработает эффект, который появится с левой стороны и уже будет совершенно другая гамма.

Здесь видим как все подводим клик.

Красивая кнопка скачать на сайте

Так смотрится если вы просто просматриваете статью или блог.

Меняем на сайте кнопку скачать

Переходим к установке:

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

Код
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">


Ставим вид материала и комментариев к нему.

Код
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?><?if($FILE_URL$)?><a class="hvr hvr-sweep-to-right" href="$FILE_URL$"><i class="fa fa-download" aria-hidden="true"></i> Скачать с сервера </a><?endif?>  
<?if($RFILE_URL$)?><a class="hvr hvr-sweep-to-right" href="$RFILE_URL$" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> Скачать удаленно </a><?endif?>  
<?if($SCREEN_URL$)?><a class="hvr hvr-sweep-to-right" href="$SCREEN_URL$" target="_blank"><i class="fa fa-picture-o" aria-hidden="true"></i> Скриншот</a><?endif?><?endif?>


CSS:

Код
a.hvr {  
  display: inline-block;  
  padding: 1em;  
  margin: 1em 0;  
  background-color: #f5f5f5;  
  text-decoration: none;  
  color: #2098D1;  
  text-decoration: none;  
}  
/* Sweep To Right */  
.hvr-sweep-to-right {  
  display: inline-block;  
  vertical-align: middle;  
  -webkit-transform: perspective(1px) translateZ(0);  
  transform: perspective(1px) translateZ(0);  
  box-shadow: 0 0 1px transparent;  
  position: relative;  
  -webkit-transition-property: color;  
  transition-property: color;  
  -webkit-transition-duration: 0.3s;  
  transition-duration: 0.3s;  
}  
.hvr-sweep-to-right:before {  
  content: "";  
  position: absolute;  
  z-index: -1;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background: #2098D1;  
  -webkit-transform: scaleX(0);  
  transform: scaleX(0);  
  -webkit-transform-origin: 0 50%;  
  transform-origin: 0 50%;  
  -webkit-transition-property: transform;  
  transition-property: transform;  
  -webkit-transition-duration: 0.3s;  
  transition-duration: 0.3s;  
  -webkit-transition-timing-function: ease-out;  
  transition-timing-function: ease-out;  
}  
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {  
  color: white;  
}  
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {  
  -webkit-transform: scaleX(1);  
  transform: scaleX(1);  
}


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

Демонстрация

Источник: Ps-studio.info
08.01.2017 Просмотров: 573 Комментарий: (4)

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

Материал разместил

Комментарий: 4
FeStemBer
FeStemBer 08.01.2017 19:371
0
Нужно было указать, что убрать с каталога файлов, так как там уже идет код от конструктора.
FeStemBer
FeStemBer 08.01.2017 19:382
0
А так понравились кнопки.
Kosten
Kosten 08.01.2017 19:433
0
Если про файлы, то вот что отметил на изображение, просто убираем, если на это же место поставите, то кнопки будут как на изображение в материале. Верхнем левом углу, если просто убрать и потом самому выставить там где нужно, это основном так делают.

Код
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
<?if($SCREEN_URL$)?> · <a href="$SCREEN_URL$" target="_blank"><!--<s5187>-->Скриншот<!--</s>--></a><?endif?> ]<?endif?>


Tergran
Tergran 09.01.2017 16:234
0
Здесь одно не пойму, под скрин нужно что делать, вот поставил, и на закачке 2 файла, значит 2 кнопки, а под изображение кнопка не появляется.
avatar