» »

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

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

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

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

Так как будет еще выводит формат, то здесь веб мастеру нужно будет для этого подключить одно поле, что изначально будет визуально видно расширение, здесь подключаем «Дополнительное поле 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;  
}

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

Источник: Artem-malcov.ru
2018-01-28 Просмотров: 1036 Комментарий: (8)

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

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

Комментарий: 8
Imapo
Imapo 2018-02-18 20:101
0
Выглядит прикольно, но использовать jQuery для прописывания стилей - то ещё извращение. Если нужно, сделаю такой же функционал кнопки на чистом CSS 04b
Kosten
Kosten 2018-02-19 00:152
0
Imapo, приветствую, но если есть желание, создайте, отдельным материалом можно сделать.
Imapo
Imapo 2018-02-19 09:133
+1
https://codepen.io/Imapo/pen/wyygxb - вот что получилось
Kosten
Kosten 2018-02-19 09:284
0
Не плохо, но как понял, для юкоз можно на стилях и на первом варианте.
Imapo
Imapo 2018-02-19 09:485
0
Щас покажу, почему нужно использовать именно CSS3:

Пример на CSS3: https://codepen.io/Imapo/pen/wyygxb
Пример на jQuery: https://codepen.io/Imapo/pen/OQQppP

А теперь быстро несколько раз наведи и отведи курсор от кнопки в версии на jQuery - в один прекрасный момент анимация забагуется и получится вот такой неприятный момент: https://yadi.sk/i/_G3kOSOP3SYK9J

В версии на CSS такого глюка получить не получится, ка ни старайся
Kosten
Kosten 2018-02-19 10:166
0
Точно, сильно заметно, просто не когда на такие нюансы сильно внимание не обращал.
Kashirina
Kashirina 2018-02-19 11:457
0
Ну не знаю как у вас, но у меня и на jQuery такого глюка нет ))
Kashirina
Kashirina 2018-02-19 11:558
0
Хотя сарян, действительно есть..
avatar