VIPAdmin / CMS / uCoz / uCoz модули / Анимированная кнопка скачать для сайта uCoz

Анимированная кнопка скачать для сайта uCoz

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

Стилистика сделана прекрасно, и безусловно приятная анимация, что будет появляться, как только наведете на ее курсор. Оформление создано на стилях, но также в стилистике присутствуют ссылки на дизайн. Простая ее на сайт, вы сразу измените страницу материалов.

Так как будет еще выводит формат, то здесь веб мастеру нужно будет для этого подключить одно поле, что изначально будет визуально видно расширение, здесь подключаем «Дополнительное поле 1» и прописывать расширение файла, в то время, когда будете добавлять материал, что нужно в ручную прописать, что после загрузки появятся данные.

HTML

<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('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;  
}