Кнопка скачать + анимация для uCoz
Хорошая кнопка с анимации, его можно использовать везде но он был создан для кнопки скачивание материала!
Там сделан текст и счетчик, количество загрузок и сколько вести ну размер скачиваемого файла!
Установка:
1) - Вид материал нужного модуля - по стандарту каталог файлов :
Таблицу стилей (CSS) самый вниз ставьте :
Там сделан текст и счетчик, количество загрузок и сколько вести ну размер скачиваемого файла!
Установка:
1) - Вид материал нужного модуля - по стандарту каталог файлов :
Код
<?if($FILE_URL$)?><div class="cnopaz">
<a href="$FILE_URL$">
<span class="cnopanumz">$LOADS$ загрузок</span>
<span class="cnopanumves">$FILE_SIZE$</span>
Скачать</a>
</div><?endif?>
<a href="$FILE_URL$">
<span class="cnopanumz">$LOADS$ загрузок</span>
<span class="cnopanumves">$FILE_SIZE$</span>
Скачать</a>
</div><?endif?>
Таблицу стилей (CSS) самый вниз ставьте :
Код
.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;
}
.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;
}
Скачать бесплатно - [.]
без регистрации через 5 сек.
Или скачать без ожидания.
Или скачать без ожидания.
