Скачать для фотошопа и для создания сайта Понедельник, 29.04.2024, 09:29
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 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
Просмотров: 6222 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Нейросеть
Автор: Marco
Форум: Все о Нейросети
Дата: 18.02.2024
Ответов: 0
База чатов - Cha...
Автор: Marco
Форум: Другое о Нейросети
Дата: 04.02.2024
Ответов: 0
Клуб Нейронных С...
Автор: Marco
Форум: Все о Нейросети
Дата: 25.01.2024
Ответов: 0
16 лучших сайтов...
Автор: Marco
Форум: Другое о Нейросети
Дата: 12.01.2024
Ответов: 0
Приложения Искус...
Автор: Marco
Форум: Другое о Нейросети
Дата: 11.01.2024
Ответов: 0

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024