Кнопка скачать с данными файла для uCoz
 | |
| Прекрасно выполненная по стилистике кнопка скачать для каталога файлов, где наведение на кнопку выезжает размер файла сайта uCoz. Теперь можно изначально узнать, сколько весит архив, и потом произвести скачивание. Что касается самого стиля, то дизайн простой и быстро его можно изменить или настроить под свой интернет ресурс. Если говорить про эффекты, то здесь они присутствуют, так как по умолчанию видим основу, но стоит только навести курсор, так появится окно с данными, а точнее сколько висит этот файл, что закреплен за материалом. Установка: В ПУ > Управление дизайном > Каталог файлов > Страница материала и комментариев к нему в нужное место добавить этот код: Код <div class="load-button"> <a href="$FILE_URL$" class="text-button" download>Скачать</a> <?if($FILE_SIZE$)?><div class="des-button">Размер $FILE_SIZE$</div><?endif?> </div> Далее в ПУ > Управление дизайном > Таблица стилей (CSS) добавить следующий код: Код .load-button {display: block; width: 200px; height: 50px; position: relative;} .load-button .text-button, .load-button .des-button {display: block; height: 50px; line-height: 50px; text-align: center; position: relative;} .load-button .text-button {width: 100%; background: #4ba4f9; color: #fff !important; border-radius: 3px; z-index: 2; cursor: pointer; text-decoration: none !important;} .load-button .des-button {width: 80%; background: #b6d4ef; color: #666; border-radius: 0 0 3px 3px; margin: 0 auto; top: -50px; z-index: 1; transition: top linear .2s; pointer-events: none;} .load-button:hover .des-button {top: 0px;} Демо: ссылка Источник: pandora.clan.su | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |