ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация границы при наведении кнопки

Анимация границы при наведении кнопки

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

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

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

Первый вариант:

По умолчанию:

Кнопка скачать

При наведение курсора:

HTML

Код

<div class="vedes-animation">
  <svg height="60" width="320">
  <rect class="knopona" height="60" width="320" />
  </svg>
  <div class="noduced">HOVER</div>
</div>

CSS

Код

.vedes-animation{
  height: 60px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  cursor:pointer;
}
.vedes-animation.in .knopona{
  animation: 0.5s draw linear forwards;
}
.vedes-animation.out .knopona{
  animation: 0.4s drawBack linear forwards;
}

.knopona {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke: #00b200;
}

.noduced {
  color: #fdf5f5;
  font-family: arial;
  font-size: 22px;
  letter-spacing: 10px;
  line-height: 31px;
  position: relative;
  top: -50px;
}

@keyframes draw {
  0% {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  }
  100% {
  stroke-dasharray: 760;
  stroke-dashoffset: 0;
  stroke-width: 2px;
  }
}
@keyframes drawBack {
  0% {
  stroke-dasharray: 760;
  stroke-dashoffset: 0;
  stroke-width: 2px;
  }
  100% {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  }
}

Код

$(".vedes-animation").hover(
  function () {
  $(this).removeClass('out').addClass('in');
  },
  function () {
  $(this).removeClass('in').addClass('out');
  }
);

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

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

Второй вариант:

С открытием страницы сайта:

При наведение клика:

Красивые CSS3 кнопки с анимацией и hover эффектами

HTML

Код

<button class="animats"><i class="nebkodim-sozdaniya"></i>СКАЧАТЬ</button>

CSS

Код

.animats{
  position: relative;;
  background:transparent;
  border:none;
  font-size:24px;
  padding: 20px 40px;
  color:#fff;
  -webkit-transition: text-shadow .4s ease;
  -moz-transition: text-shadow .4s ease;
  -o-transition: text-shadow .4s ease;
  transition: text-shadow .4s ease;
  /* for demo delete this*/
  margin-top:30px;
  left: 50%;
  top: 50%;
  cursor:pointer;
}
.nebkodim-sozdaniya:after,.nebkodim-sozdaniya:before{
  content: '';
  width: 3px;
  height: 3px;
  position: absolute;
  background-color:#fff;
  -webkit-transition: height .4s ease;
  -moz-transition: height .4s ease;
  -o-transition: height .4s ease;
  transition: height .4s ease;
  border-radius:50%;
}

.nebkodim-sozdaniya:before{
  left: 0;
  bottom: 0;
}

.nebkodim-sozdaniya:after{
  right: 0;
  top: 0;
}

.animats:after,.animats:before{
  content: '';
  width: 3px;
  height: 3px;
  position: absolute;
  background-color:#fff;
  -webkit-transition: width .4s ease;
  -moz-transition: width .4s ease;
  -o-transition: width .4s ease;
  transition: width .4s ease;
  border-radius:50%;
}

.animats:after{
  right: 0;
  bottom: 0;1px 1px #000
}

.animats:before{
  left: 0;
  top: 0;
}
.animats:hover:after,.animats:hover:before{
  width:100%;
}
.animats:hover .nebkodim-sozdaniya:before{
  height:100%;
}
.animats:hover {
text-shadow: 10px 10px 10px #000;
  }
.animats:hover .nebkodim-sozdaniya:after{
  height:100%;
}
.animats:focus {
  outline:none;
}

Подойдет как под темный так и под светлый фон, все три вариаций кнопок.

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

Третий вариант:

Здесь все в аналогичном виде:

Готовые кнопки для сайта css

Где границы кнопки движутся:

Кнопки для сайта html

HTML

Код

<div class="goduas-mnogiye-pumenem">
  Здесь наводим
  <span class="dasuima-top"></span>
  <span class="dasuima-right"></span>
  <span class="dasuima-bottom"></span>
  <span class="dasuima-left"></span>
  </div>

CSS

Код

.goduas-mnogiye-pumenem {
  display: inline-block;
  margin: 15px;
  padding: 20px 40px;
  text-transform: uppercase;
  background: none;
  color: #000;
  border: 0;
  letter-spacing: 3px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  }

.goduas-mnogiye-pumenem span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

  .dasuima-top {
  border-top: 1px solid #000;
  animation-duration: 2s;
  animation-name: dasuima-top-anim;
  animation-iteration-count: infinite;
  }

  .dasuima-right {
  border-right: 1px solid #000;
  animation-duration: 2s;
  top: -100%;
  animation-delay: 1s;
  animation-name: dasuima-right-anim;
  animation-iteration-count: infinite;
  }

  .dasuima-bottom {
  border-bottom: 1px solid #000;
  animation-duration: 2s;
  animation-name: dasuima-bottom-anim;
  animation-iteration-count: infinite;
  }

  .dasuima-left {
  border-left: 1px solid #000;
  animation-duration: 2s;
  top: -100%;
  animation-name: dasuima-left-anim;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  }

@keyframes dasuima-top-anim {
  from {
  left: -100%;
  }
  to {
  left: 100%;
  }
}
@keyframes dasuima-right-anim {
  from {
  top: -100%;
  }
  to {
  top: 100%;
  }
}
@keyframes dasuima-bottom-anim {
  from {
  right: -100%;
  left: 100%;
  }
  to {
  right: 100%;
  left: -100%;
  }
}
@keyframes dasuima-left-anim {
  from {
  bottom: -100%;
  top: 100%;
  }
  to {
  bottom: 100%;
  top: -100%;
  }
}

Такой стиль сделан, чтоб при открытие сайта, изначально было заметна эта кнопка.

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

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

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

14 Августа 2019 Загрузок: 1 Просмотров: 1112 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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