ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Анимированная кнопка скачать для сайта

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

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

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

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

28 Января 2018 Просмотров: 3223 Комментариев: (8)

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

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

Kosten

Комментарии: 8
Порядок вывода комментариев: Imapo 18 Февраля 2018 20:10¹ 0 Выглядит прикольно, но использовать jQuery для прописывания стилей - то ещё извращение. Если нужно, сделаю такой же функционал кнопки на чистом CSS Kosten 19 Февраля 2018 00:15² 0 Imapo, приветствую, но если есть желание, создайте, отдельным материалом можно сделать. Imapo 19 Февраля 2018 09:13³ +1 https://codepen.io/Imapo/pen/wyygxb - вот что получилось Kosten 19 Февраля 2018 09:28⁴ 0 Не плохо, но как понял, для юкоз можно на стилях и на первом варианте. Imapo 19 Февраля 2018 09:48⁵ 0 Щас покажу, почему нужно использовать именно CSS3: Пример на CSS3: https://codepen.io/Imapo/pen/wyygxb Пример на jQuery: https://codepen.io/Imapo/pen/OQQppP А теперь быстро несколько раз наведи и отведи курсор от кнопки в версии на jQuery - в один прекрасный момент анимация забагуется и получится вот такой неприятный момент: https://yadi.sk/i/_G3kOSOP3SYK9J В версии на CSS такого глюка получить не получится, ка ни старайся Kosten 19 Февраля 2018 10:16⁶ 0 Точно, сильно заметно, просто не когда на такие нюансы сильно внимание не обращал. Kashirina 19 Февраля 2018 11:45⁷ 0 Ну не знаю как у вас, но у меня и на jQuery такого глюка нет )) Kashirina 19 Февраля 2018 11:55⁸ 0 Хотя сарян, действительно есть..