ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка скачать с красивой анимацией на CSS3

Кнопка скачать с красивой анимацией на CSS3

При виде кнопки сразу видно, что вам предлагают скачать файл, что отличное решение для тематических сайтов, где приходится часто скачивать. Если ранее писали на самом дизайн знаки, то сейчас все делается на стилистике. Но это не все, так как здесь еще добавлены элементы, что появятся при наведении клика. Автоматически сменится полностью дизайн, но вот надпись, и как раз к ней присоединятся еле иконки, которые полностью будут на анимации. Что для современного сайта эффект это нормально, главное, чтоб он по теме был, здесь изначально понятно для какой функциональности кнопка предназначена.

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

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

По умолчанию идет такой обзор, когда заходишь на ресурс:

Анимированная кнопка

Как понимаете, здесь навели клик, и анимация появилась:

Сделать кнопку для сайта на CSS+HTML с эффектами

Приступаем к установке:

HTML

Код

<a href="Ссылка" class="coast-to-coast">Скачать</a>

CSS

Код

.coast-to-coast {
  display: table;
  position: relative;
  padding: 12px 31px;
  background: #337713;
  -webkit-border-radius: 20px;
  color: #f5f5f5;
  font: 13px verdana;
  text-decoration: none;
  text-align: center;
  text-indent: 17px;
  margin: 7px auto;
  transition: all 0.5s ease 0s;
  border: 1.7px solid #effbf1;
  box-shadow: 0px 7px 17px rgba(49, 41, 41, 0.46), 0px 10px 30px -15px rgba(43, 41, 41, 0.28);
}

.coast-to-coast:hover {
  background-color: #2d2a2a;
  color: white;
}

.coast-to-coast:before, .coast-to-coast:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 17px;
  top: 49%;
}

.coast-to-coast:before {
  width: 9px;
  height: 3px;
  border-style: solid;
  border-width: 0 3px 3px;
}

.coast-to-coast:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.coast-to-coast:hover:before {
  border-color: #59c328;
}

.coast-to-coast:hover:after {
  border-top-color: #59c328;
  animation-play-state: running;
}

@keyframes downloadArrow {
  0% {
  margin-top: -7px;
  opacity: 1;
  }

  0.001% {
  margin-top: -15px;
  opacity: 0;
  }

  50% {
  opacity: 1;
  }

  100% {
  margin-top: 0;
  opacity: 0;
  }
}

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

Демонстрация

06 Июля 2018 Просмотров: 1484 Комментариев: (0)

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

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

Kosten

Комментарии: 0