Анимированная кнопка скачать для сайта 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;  
}

Комментарии
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!


Вы не зарегистрированы

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


Автор публикации
Дата публикации
19-01-2022, 16:15
Просмотров
64
Комментариев
0

0
0
Внимание! Данный материал предоставлен сайтом VipAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Реклама
Как скачать?
Пройдите регистрацию на сайте
Воспользуйтесь кнопкой "Скачать"
Ровно через 15 секунд вам будет доступна прямая ссылка на файл
Анимированная кнопка скачать для сайта uCoz
19-01-2022, 16:15
64

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

Информация
Версия
v1.405
Версия CMS
v15.0
Тематика
Новости, Блог, Каталог
Фреймворк
Bootstrap v5

Описание


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

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

Так как будет еще выводит формат, то здесь веб мастеру нужно будет для этого подключить одно поле, что изначально будет визуально видно расширение, здесь подключаем «Дополнительное поле 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;  
}
[xfgiven_images]
Изображения
[/xfgiven_images]
Автор публикации
wad
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


  • Вы не зарегистрированы

Последние комментарии
Слив аналога nakrutka.by
tommygun
Вчера, 01:57
привет, админка не реагирует на функции , например на добавлении или изменении категорий , как
Слив интернет магазина от ScriptBerry
Гость Arthurr
14 мая 2022 21:07
65.21.218.141
Слив интернет магазина от ScriptBerry
Arthurr
14 мая 2022 21:06
65.21.218.141
VII ENGINE 2.0 НОВАЯ СБОРКА
Имран Абай
14 мая 2022 17:34
создаю соц сеть
Слив интернет магазина от ScriptBerry
VexBor
13 мая 2022 23:07
95.211.16.66
Скрипт рулетки PLAY2X WINBEE DICE MINE NVUTI CABURA
tommygun
13 мая 2022 19:18
бля я как немногу ларавелы установить никак у мя не работают
WP Guppy v2.3 NULLED - плагин живого чата для WordPress
Daniil_xxx
13 мая 2022 11:01
Подскажите. Есть последняя версия плагина 3.3 ?
Workreap v2.1.8 - шаблон биржи фриланса wordpress
Daniil_xxx
13 мая 2022 11:00
Добрый день. Подскажите есть последняя версия темы? 2.5.2
Unisite Board 4.4 NULLED NEW 2022
Гость 2022
12 мая 2022 23:25
hello. can you null this template? they wont sell it, and wont give it adbroad.
Скрипт лотереи(которую продают)
tommygun
11 мая 2022 01:32
после установки сборки белый экран , как решить ребята?
Скрипт WF-TICKET - Открытие кейсов + карточки
tommygun
10 мая 2022 23:47
нерабочая админка
Unisite Board 4.4 NULLED NEW 2022
Гость Алексей
10 мая 2022 16:37
Есть ли у кого новая версия 4.6 готов преобрести
InvestPro v3.0.1 – Wallet &amp; Banking Online Hyip Investment Platform
tommygun
9 мая 2022 06:13
хочу сказать СПАСИБО авторам и всем тем кто держит данный сайт, вы молодцы ребята , прошу
Слив скрипта cabura
магомед камалудинов
9 мая 2022 01:14
нужен скрипт
Social Business Networking 1.2 - социальная бизнес сеть
tommygun
8 мая 2022 22:51
битая ссылка