ZorNet.Ru — сайт для вебмастера » HTML и CSS » Потрясающий эффект кнопки на HTML + CSS3

Потрясающий эффект кнопки на HTML + CSS3

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

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

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

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

При наведении клика идет анимация:

Как создать анимационную кнопку при помощи CSS

Установка:

HTML

Код

<a href="#" class="knoposka">Скачать</a>

CSS

Код

.knoposka {
  position: relative;
  z-index: 2;
  transition: 1s ease all;
  animation-delay: 1s;
  background: none;
  color: #f7e8e8;
  font-size: 1em;
  font-weight: 600;
  text-decoration: none;
  padding: 18px 26px;
  display: inline-block;
}
.knoposka::before,
.knoposka::after{
  content:'';
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
  transition:1s ease all;
  border-radius: 0;
  animation-delay: 0.5s;
}
.knoposka::before {
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  background: #b3bce9;
  width: 90%;
  height: 90%;
}
.knoposka::after{
  border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
  background: #4383e1;
  width:90%;
  height:90%;
}
.knoposka:hover::before,
.knoposka:focus::after{
  width:107%;
  height:119%;
  animation:main 4.5s linear infinite;
  opacity: 1;
}

.knoposka:hover::after,
.knoposka:focus::after{
  width:103%;
  height:117%;
  animation:animation-two 5s linear infinite;
  opacity: 1;
}

@keyframes main{
  0%{
  border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%;
  transform:translate(-50%,-50%) rotate(0);
  }
  20%{
  border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%;
  transform:translate(-48%,-52%) rotate(1deg);
  }
  45%{
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate(-52%,-54%) rotate(0);
  }
  85%{
  border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
  transform:translate(-49%,-48%) rotate(-1deg);
  }
  100%{
  border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%;
  transform:translate(-50%,-50%) rotate(0);
  }
}

@keyframes animation-two{
  0%{
  border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
  transform:translate(-50%,-50%) rotate(0);
  }
  15%{
  border-radius: 26% 74% 82% 18% / 48% 41% 59% 52%;
  transform:translate(-48%,-53%) rotate(1deg);
  }
  40%{
  border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%;
  transform:translate(-52%,-57%) rotate(0);
  }
  75%{
  border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%;
  transform:translate(-47%,-52%) rotate(-1deg);
  }
  100%{
  border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
  transform:translate(-50%,-50%) rotate(0);
  }
}

Если вы в поисках оригинального эффекта анимации, которая предназначена для кнопок, это, чтобы заменить старые кнопки современным плоским дизайном и 3D-кнопками с уникальными формами. То безусловно вы попали в нужное место, ведь на сайте полный список кнопок CSS, стоит воспользоваться поиском внутри портала.

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

10 Сентября 2022 Загрузок: 1 Просмотров: 694 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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