ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Кнопка «Отправить» с анимацией на JS + CSS

Кнопка «Отправить» с анимацией на JS + CSS

Кнопка «Отправить» с анимацией на JS + CSS
Здесь представлена оригинальная анимация для кнопки воспроизведения, где по клику производится не эффект, а реальная перестройка дизайна на CSS. Если мы основном видим кнопки с эффектами, где при наведении она меняет оттенок цвета, или идет подчеркивание, вообще идет некое изменение в рамках одного дизайн. То в нашем случай мы изначально наблюдаем стандартную кнопку, но при клике она преобразуется в круглый элемент, где в кругу по центру идет галочка.

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

Такой вид идет по умолчанию:

Красивая кнопка для сайта с анимацией

Этот вид уже после прошедшей анимации:

Эффекты анимации на CSS

Установка

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

HTML

Код
<main>
  <div class="knupaska">
  <div class="kalonsa">Включить</div>
  </div>
  <div class="osnovanua_knopku"></div>
  <svg x="0px" y="0px"
  viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
  <path class="vasemulad" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
  </svg>
</main>

CSS

Код
.knupaska {
  background: #2f3438;
  height: 80px;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 4px;
}

.kalonsa {
  font: bold 1.25rem/1 poppins;
  color: #05b6f3;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
}

.osnovanua_knopku {
  position: absolute;
  height: 10px;
  width: 0;
  right: 0;
  top: 50%;
  left: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: lighten(#2B2D2F, 15%);
}

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  right: 0;
}

.vasemulad {
  fill: none;
  stroke: #f2f7bb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

JS

Код
var basicTimeline = anime.timeline({
  autoplay: false
});

var pathEls = $(".vasemulad");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
  targets: ".kalonsa",
  duration: 1,
  opacity: "0"
  })
  .add({
  targets: ".knupaska",
  duration: 1300,
  height: 10,
  width: 300,
  backgroundColor: "#33363a",
  border: "0",
  borderRadius: 100
  })
  .add({
  targets: ".osnovanua_knopku",
  duration: 2000,
  width: 300,
  easing: "linear"
  })
  .add({
  targets: ".knupaska",
  width: 0,
  duration: 1
  })
  .add({
  targets: ".osnovanua_knopku",
  width: 80,
  height: 80,
  delay: 500,
  duration: 750,
  borderRadius: 80,
  backgroundColor: "#84dff3"
  })
  .add({
  targets: pathEl,
  strokeDashoffset: [offset, 0],
  duration: 200,
  easing: "easeInOutSine"
  });

$(".knupaska").click(function() {
  basicTimeline.play();
});

$(".kalonsa").click(function() {
  basicTimeline.play();
});

На этом установочный процесс завершен!

Демонстрация
2022-11-17 Загрузок: 1 Просмотров: 230 Комментарий: (0)

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

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

Оставь свой отзыв

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