ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Анимированные кнопки с эффектом вниз

Анимированные кнопки с эффектом вниз

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

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

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

Вот как раз 2 разных варианта стрелок, которые разнообразны по своим функциям:

1. Вариант - Прокрутить стрелку вниз:

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

Анимированные эффекты при наведении на кнопку

HTML

Код

CSS

Код

.kactumegas {
  position: relative;
  border: 3px solid #e8e4e4;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  cursor:pointer;
}

span {
  z-index: 999;
  height: 3px;
  margin:1px;
  width: 30px;
  background: #e8e4e4;
  transition: 0.5s ease;
}

span:first-child {
  display: block;
  position: absolute;
  transform: rotate(45deg);
  left: 25%;
  bottom: 35%;
}

span:nth-child(2) {
  display: block;
  position: absolute;
  transform: rotate(-45deg);
  left: 45%;
  bottom: 35%;
}

span:nth-child(3) {
  display: block;
  position: absolute;
  transform: rotate(45deg);
  left: 25%;
  bottom: 54%;
}

span:nth-child(4) {
  display: block;
  position: absolute;
  transform: rotate(-45deg);
  left: 45%;
  bottom: 54%;
}

.kactumegas:hover span:nth-child(1) {
  transform: rotate(-135deg);
}

.kactumegas:hover span:nth-child(2) {
  transform: rotate(135deg);
}

.kactumegas:hover span:nth-child(3) {
  transform: rotate(225deg);
}

.kactumegas:hover span:nth-child(4) {
  transform: rotate(-225deg);
}

Здесь изначально выстроено под светлый формат сайта, если у вас светлый портал, то все в CSS можно выстроить под разную палитру цвета.

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

2. Вариант - Прокрутить стрелку вниз:

Анимация виде указателя, где при клике на стрелку происходит анимация, а точнее проворачивается виде круга и опять выставляет стрелку, что была по умолчанию.

В этом варианте нужно подключить библиотеку, то без нее не появится анимация. У кого сайт на конструкторе uCoz, то вам не нужно не чего делать, так как библиотека подключена к системе.

Потрясающие эффекты для кнопок при нажатии

HTML

Код

CSS

Код

.loptudsin-klavegas {
  position: absolute;
  display: block;
  cursor: pointer;
  width: 40px; height: 40px;
  top: 50%; left: 50%;
  margin: -20px 0 0 -20px;
}
  .loptudsin-klavegas:before,
  .loptudsin-klavegas:after {
  position: absolute;
  display: block;
  content: '';
  width: 30px; height: 30px;
  left: 50%; top: 50%;
  margin-top: -15px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #f1f1f9;
  border-right-color: #f1f1f9;
  border-radius: 0 0 5px 0;

  transform: translate(-50%, -50%) rotate(45deg);

  transition: all .4s ease-in-out;
  }
  .loptudsin-klavegas.lasegun:before {
  border-radius: 50%;
  animation:
  .8s rotate .4s linear forwards infinite;
  }
  .loptudsin-klavegas.lasegun:after {
  width: 38px; height: 38px;
  border-radius: 50%;
  animation:
  .8s rotate2 .4s linear forwards infinite;
  }
  @keyframes rotate {
  to {
  transform: translate(-50%, -50%) rotate(405deg);
  }
  }
  @keyframes rotate2 {
  to {
  transform: translate(-50%, -50%) rotate(-315deg);
  }
  }
  .load-more.disabled:before,
  .load-more.disabled:after {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(135deg) rotateY(180deg);
  }

Код

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

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

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

29 Мая 2019 Просмотров: 2245 Комментариев: (0)

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

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

Kosten

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