ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированные кнопки с помощью SVG + CSS

Анимированные кнопки с помощью SVG + CSS

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

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

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

Проверенно на работоспособность по всем функциям.

HTML

Код

<div class="creatawe-somenks">
  <svg height="40" width="150" xmlns="">
  <rect id="usingukopam" height="40" width="150" />
  <div id="kolesnusa">
  <a href=""><span class="tedugan"></span>Zornet.Ru</a>
  </div>
  </div>

CSS

Код

.tedugan {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.creatawe-somenks {
  margin-top: 0;
  position: relative;
  width: 150px;
  height: 40px;
  display: inline-block;
  border-radius: 5px;
  margin-left: 7px;
  margin-right: 7px
}

#usingukopam {
  stroke-width: 4px;
  fill: transparent;
  stroke: #199eec;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}

#kolesnusa {
  margin-top: -34px;
  text-align: center;
}

#kolesnusa a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.2em;
}

.creatawe-somenks:hover #usingukopam {
  stroke-dasharray: 50 0;
  stroke-width: 4px;
  stroke-dashoffset: 0;
  stroke: #5aa3f1;
}

Здесь идет один эффект, который автоматически срабатывает с наведением на кнопку курсора.

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

14 Октября 2018 Просмотров: 1736 Комментариев: (0)

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

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

Kosten

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