Меню сайта |
|
|
Категории раздела |
|
|
Популярное |
|
|
Мини-чат |
|
|
Наш опрос |
Оцените мой сайт
Всего ответов: 7
|
|
Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
Анимированная кнопка скачать для сайта
| 20.10.2020, 00:51 |
Анимированная кнопка скачать для сайта
Красиво созданная кнопка скачать файлы, примечательно тем, что ней присутствует стильная анимация при наведении, также выводит данные. Плюс в ней, что отлично подойдет на любой фон, это как на темный или под светлый формат. Сама она создана в синей гамме цвета, также присутствует белый оттенок, что будет выдвигаться. Пользователь изначально будет видеть сколько весит материал, что на софт порталов будет отличным решением.
Стилистика сделана прекрасно, и безусловно приятная анимация, что будет появляться, как только наведете на ее курсор. Оформление создано на стилях, но также в стилистике присутствуют ссылки на дизайн. Простая ее на сайт, вы сразу измените страницу материалов.
Так как будет еще выводит формат, то здесь веб мастеру нужно будет для этого подключить одно поле, что изначально будет визуально видно расширение, здесь подключаем «Дополнительное поле 1» и прописывать расширение файла, в то время, когда будете добавлять материал, что нужно в ручную прописать, что после загрузки появятся данные.
Вид на светлом фоне:
Здесь вы навели клик:
Код Код <div class="kanything_sanimal_derdsam"> <a href="<?if($FILE_URL$)?>$FILE_URL$<?else?>$RFILE_URL$<?endif?>" title="Скачиваний: $LOADS$"> <div class="antidises_tablishm_entarianism"></div> <div class="anocalcal_inocerac_eoaluminos"> <div class="seudopse_rynimdsa"> <div class="adohypopa_rathyroidism">
<div class="gransticex_pialidocious"> <span>Скачать сейчас</span> Расширение: $OTHER1$ </div>
<div class="lotunupe_rcalifragil"> <?if($FILE_SIZE$)?>$FILE_SIZE$<?else?>$RFILE_SIZE$<?endif?> </div>
<div class="picsilicovol_canoconiosis"></div>
</div> </div>
<div class="tuneumo_noultramicros"></div> </div> </a> </div>
<script> $(".kanything_sanimal_derdsam").on({
mouseenter: function () {
var attachment_target = $(this);
$(attachment_target).addClass('attachment_active');
setTimeout(function() { $(".attachment_active .seudopse_rynimdsa").css({ "margin": "6px 0 0 0" });
$(".attachment_active .adohypopa_rathyroidism").css({ "margin": "0 0 0 -17px" });
setTimeout(function() { $(".attachment_active .tuneumo_noultramicros").css({ "opacity": "1", "visibility": "visible", "-webkit-transform": "translateY(0)", "-moz-transform": "translateY(0)", "-ms-transform": "translateY(0)", "transform": "translateY(0)" }); }, 400); }, 400);
}, mouseleave: function () {
var attachment_target = $(this);
setTimeout(function() { $(".attachment_active .seudopse_rynimdsa").css({ "margin": "6px 0 0 37px" });
$(".attachment_active .adohypopa_rathyroidism").css({ "margin": "0 0 0 4px" });
$(attachment_target).removeClass('attachment_active'); }, 400);
setTimeout(function() { $(".attachment_active .tuneumo_noultramicros").css({ "opacity": "0", "visibility": "hidden", "-webkit-transform": "translateY(-19%)", "-moz-transform": "translateY(-19%)", "-ms-transform": "translateY(-19%)", "transform": "translateY(-19%)" }); }, 0);
setTimeout(function() { $(".attachment_active .tuneumo_noultramicros").css({ "opacity": "0", "visibility": "hidden", "-webkit-transform": "translateY(-19%)", "-moz-transform": "translateY(-19%)", "-ms-transform": "translateY(-19%)", "transform": "translateY(-19%)" }); }, 800); } }); </script>
CSS
Код Код .kanything_sanimal_derdsam { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.kanything_sanimal_derdsam *:before, .kanything_sanimal_derdsam *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.kanything_sanimal_derdsam { position: relative; height: 71px; width: 329px; margin: 0 auto; }
.antidises_tablishm_entarianism { background: url('http://zornet.ru/ZORNET-RU/ZR/K-IjcAEOS9Sl8SkRsVFG0g.png'); height: 71px; width: 329px; border-radius: 99px; position: absolute; transition: .3s; z-index: 99; top: 0; left: 0; opacity: 0; box-shadow: 0px 1px 1px 0px rgba(35, 34, 34, 0.14) inset; }
.kanything_sanimal_derdsam:hover .antidises_tablishm_entarianism { opacity: 1; transition: .3s; }
.anocalcal_inocerac_eoaluminos { background: url('http://zornet.ru/ZORNET-RU/ZR/QzsBsrG9TnaZRE2T-38Grw.png'); width: 290px; height: 64px; border-radius: 75px; float: right; margin: 3px 3px 0 0; position: absolute; top: 0; right: 0; z-index: 999; }
.seudopse_rynimdsa { width: 216px; height: 53px; background: url('http://zornet.ru/ZORNET-RU/ZR/_RqgVq4kQF_uWezgnEzCEQ.png'); border-radius: 83px; border-bottom: 1px solid #266277; box-shadow: 0px 2px 2px 0px rgba(29, 27, 27, 0.29) inset; margin: 6px 0 0 37px; padding: 4px 0 0 0; transition: .3s; }
.tuneumo_noultramicros { width: 50px; height: 39px; background: url('http://zornet.ru/ZORNET-RU/ZR/k2wLkbN5SZmRqp9hHuPtzg.png') no-repeat center center; opacity: 0; margin: 16px 13px 0 0; -webkit-transform: translateY(-19%); -moz-transform: translateY(-19%); -ms-transform: translateY(-19%); transform: translateY(-19%); visibility: hidden; position: absolute; top: 0; right: 0; transition: .3s; }
.adohypopa_rathyroidism { width: 207px; height: 44px; background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/hQMzobd2S16IoDHR9GPkTA.png'); border-radius: 99px; margin: 0 0 0 4px; box-shadow: 0px 1px 1px 0px rgba(29, 28, 28, 0.51); border-top: 1px solid #4a5561; transition: .3s; }
.stop_animation { opacity: 0 !important; -webkit-transform: translateY(-19%) !important; -moz-transform: translateY(-19%) !important; -ms-transform: translateY(-19%) !important; transform: translateY(-19%) !important; visibility: hidden !important; }
.gransticex_pialidocious { font-family: 'Open Sans Condensed', sans-serif; color: #f3eded; font-size: 11px; text-transform: uppercase; padding: 0px 0px 0px 15px; float: left; text-shadow: 0 1px 0 #1d1c1c; }
.gransticex_pialidocious span { font-size: 11.8px; display: block; margin: 5px 0 0px 0; }
.lotunupe_rcalifragil { float: right; color: #f3ecec; font-family: 'Open Sans Condensed', sans-serif; padding: 10px 15px 0px 0px; text-transform: uppercase; font-size: 15px; text-shadow: 0 1px 0 #211e1e; }
.lotunupe_rcalifragil span { font-size: 26px; }
.picsilicovol_canoconiosis { border-left: 1px solid #343338; border-right: 1px solid #221f23; height: 42.9px; float: right; margin: 0 10px 0 0; }
.kanything_sanimal_derdsam a { text-decoration: none !important; }
Все должны быть исправлены, и все должны быть исправлены, все снимки представлены с проверками работоспособности на разном фоне.
Источник: Artem-malcov.ru
Анимированная кнопка скачать для сайта, которая создана на CSS3
HTML
Код Код <div class="kanything_sanimal_derdsam"> <a href="#" title="Скачиваний: 235"> <div class="antidises_tablishm_entarianism"></div> <div class="anocalcal_inocerac_eoaluminos"> <div class="seudopse_rynimdsa"> <div class="adohypopa_rathyroidism">
<div class="gransticex_pialidocious"> <span>Скачать сейчас</span> Расширение: .ZIP </div>
<div class="lotunupe_rcalifragil"> 12 MB </div>
<div class="picsilicovol_canoconiosis"></div>
</div> </div>
<div class="tuneumo_noultramicros"></div> </div> </a> </div>
CSS
Код Код .kanything_sanimal_derdsam { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.kanything_sanimal_derdsam *:before, .kanything_sanimal_derdsam *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.kanything_sanimal_derdsam { position: relative; height: 71px; width: 329px; margin: 0 auto; }
.antidises_tablishm_entarianism { background: url('http://zornet.ru/ZORNET-RU/ZR/K-IjcAEOS9Sl8SkRsVFG0g.png'); height: 71px; width: 329px; border-radius: 99px; position: absolute; transition: .3s; z-index: 99; top: 0; left: 0; opacity: 0; box-shadow: 0px 1px 1px 0px rgba(35, 34, 34, 0.14) inset; }
.kanything_sanimal_derdsam:hover .antidises_tablishm_entarianism { opacity: 1; transition: .3s; }
.anocalcal_inocerac_eoaluminos { background: url('http://zornet.ru/ZORNET-RU/ZR/QzsBsrG9TnaZRE2T-38Grw.png'); width: 290px; height: 64px; border-radius: 75px; float: right; margin: 3px 3px 0 0; position: absolute; top: 0; right: 0; z-index: 999; }
.seudopse_rynimdsa { width: 216px; height: 53px; background: url('http://zornet.ru/ZORNET-RU/ZR/_RqgVq4kQF_uWezgnEzCEQ.png'); border-radius: 83px; border-bottom: 1px solid #266277; box-shadow: 0px 2px 2px 0px rgba(29, 27, 27, 0.29) inset; margin: 6px 0 0 37px; padding: 4px 0 0 0; transition: .3s; }
.tuneumo_noultramicros { width: 50px; height: 39px; background: url('http://zornet.ru/ZORNET-RU/ZR/k2wLkbN5SZmRqp9hHuPtzg.png') no-repeat center center; opacity: 0; margin: 16px 13px 0 0; -webkit-transform: translateY(-19%); -moz-transform: translateY(-19%); -ms-transform: translateY(-19%); transform: translateY(-19%); visibility: hidden; position: absolute; top: 0; right: 0; transition: .3s; }
.adohypopa_rathyroidism { width: 207px; height: 44px; background: url('https://image.prntscr.com/image/hQMzobd2S16IoDHR9GPkTA.png'); border-radius: 99px; margin: 0 0 0 4px; box-shadow: 0px 1px 1px 0px rgba(29, 28, 28, 0.51); border-top: 1px solid #4a5561; transition: .3s; }
.stop_animation { opacity: 0 !important; -webkit-transform: translateY(-19%) !important; -moz-transform: translateY(-19%) !important; -ms-transform: translateY(-19%) !important; transform: translateY(-19%) !important; visibility: hidden !important; }
.gransticex_pialidocious { font-family: 'Open Sans Condensed', sans-serif; color: #f3eded; font-size: 11px; text-transform: uppercase; padding: 0px 0px 0px 15px; float: left; text-shadow: 0 1px 0 #1d1c1c; }
.gransticex_pialidocious span { font-size: 11.8px; display: block; margin: 5px 0 0px 0; }
.lotunupe_rcalifragil { float: right; color: #f3ecec; font-family: 'Open Sans Condensed', sans-serif; padding: 10px 15px 0px 0px; text-transform: uppercase; font-size: 15px; text-shadow: 0 1px 0 #211e1e; }
.lotunupe_rcalifragil span { font-size: 26px; }
.picsilicovol_canoconiosis { border-left: 1px solid #343338; border-right: 1px solid #221f23; height: 42.9px; float: right; margin: 0 10px 0 0; }
.kanything_sanimal_derdsam a { text-decoration: none !important; }
.kanything_sanimal_derdsam:hover .seudopse_rynimdsa { margin: 6px 0 0 0; }
.kanything_sanimal_derdsam:hover .adohypopa_rathyroidism { margin: 0 0 0 -17px; }
.kanything_sanimal_derdsam:hover .tuneumo_noultramicros { transition-delay: .5s; opacity: 1; visibility: visible; transform: translateY(0); }
На этом вся установка.
Демонстрация
Доработал: Imapo
| После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
Категория: Скачать Скрипты для Ucoz | Добавил: Marco |
Просмотров: 6246 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
|
Вход на сайт |
|
|
Поиск |
|
|
Популярное |
|
|
Популярное |
|
|
|