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

Красивый эффект волны кнопки с помощью CSS

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

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

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

Приступаем к установке:

HTML

Код

<div class="vedupcobmoda">
  <a href="http://zornet.ru">
  <div class="kuisenthurovas-1"></div>
  <div class="kuisenthurovas-2"></div>
  <span>ZorNet.Ru</span>
  </a>
</div>

CSS

Код

.vedupcobmoda {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

a {
  position: relative;
  padding: 12px 15px;
  text-decoration: none;
  font-size: 2em;
  display: inline-block;
  text-align: center;
  color: #ececec;
  font-weight: bold;
  letter-spacing: 1.3px;
  overflow: hidden;
  border-radius: 17px;
  background-color: #d02d3c;
  background-color: #791821;
  border: 2px solid #cccccc;
  text-shadow: 0 1px 0 #403a3a;
}

a div[class^="kuisenthurovas-"] {
  position: absolute;
  z-index: 0;
  height: 197px;
  width: 197px;
  border-radius: 51%;
  opacity: .5;
}

a div.kuisenthurovas-1 {
  background-color: #FF8591;
  left: 85px;
  bottom: -10px;
  transform: rotate(20deg);
}

a div.kuisenthurovas-2 {
  background-color: #ab313c;
  top: -10px;
  transform: rotate(180deg);
  right: 100px;
}

span {
  position: relative;
}

a:hover .kuisenthurovas-1 {
  animation: kuisenthurovas-1 6s infinite linear;
}

a:hover .kuisenthurovas-2 {
  animation: kuisenthurovas-2 6s infinite linear;
}

@keyframes kuisenthurovas-1 {
  0% {
  transform: rotate3d(0,0,1,20deg);
  }

  50% {
  transform: rotate3d(0,0,1,200deg);

  }

  100% {
  transform: rotate3d(0,0,1,380deg);
  }
}

@keyframes kuisenthurovas-2 {
  0% {
  transform: rotate3d(0,0,1,180deg);
  }

  50% {
  transform: rotate3d(0,0,1,0deg);
  right: 110px;
  }

  100% {
  transform: rotate3d(0,0,1,-180deg);
  }
}

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

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

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

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

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

Kosten

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