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

Эффект вращение кнопки при наведении

Очень необычный и оригинальный эффект вращающееся кнопки при наведении на ее клика, что смотрится интересно и только используются стили CSS. Где самостоятельно вносится изменение, что веб-разработчик задействует CSS свойство animation, это он уменьшает или увеличивает скорость вращение. Безусловно такой трюк Hover эффекта для кнопок станет заметным и привлечет внимание, а также удивить своего пользователя.

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

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

HTML

Код

<div class="munilearn-someon-cating">
Средний, радиус границы, где фон 45 градусов
<div class="vedugen">
  <button class="spgekol-asenacm">JQUERY
</button>
  <div class="cumisconcep kepanoncecved"></div>
  </div>

Быстрый, радиус границы, где вертикальный фон
  <div class="vedugen">
  <button class="spgekol-asenacm fast">CSS</button>
  <div class="cumisconcep kepanoncecved second"></div>
  </div>

Быстрее, без границ, где радиус 45 градусов
<div class="vedugen">
  <button class="spgekol-asenacm faster">HTML</button>
  <div class="cumisconcep kepanoncecved third"></div>
  </div>
</div>

CSS

Код

.munilearn-someon-cating{
  padding: 60px 80px;
  background-color: white;
  box-shadow: 0 0 4px 1px #BBB;
  margin: auto;
  text-align: center;
}

.vedugen{
  position: relative;
  width: 80px;
  height: 80px;
  margin: 15px auto 28px auto;
margin-bottom: 0;
  }

.spgekol-asenacm{
  background-color: white;
  outline: none;
  font-weight: 600;
  position:absolute;
  cursor: pointer;
  padding: 0;
  border: none;
  height: 64px;
  width: 64px;
  left: 8px;
  top: 8px;
  border-radius: 100px;
  z-index: 2;
}

.spgekol-asenacm:active{
  transform: translate(0, 1px);
  height: 63px;
  box-shadow: 0px 1px 0 0 rgb(189, 184, 184) inset;
}

.cumisconcep{
  position: relative;
  border-radius:40px;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.cumisconcep.third{
  border-radius: 0;
}

.spgekol-asenacm.faster:hover + .cumisconcep, .spgekol-asenacm.faster:active + .cumisconcep {
  animation: rotator linear .4s infinite;
}

.spgekol-asenacm.fast:hover + .cumisconcep, .spgekol-asenacm.fast:active + .cumisconcep {
  animation: rotator linear .5s infinite;
}

.spgekol-asenacm:hover + .cumisconcep, .spgekol-asenacm:active + .cumisconcep {
  animation: rotator linear .8s infinite;
}

@keyframes rotator{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


.kepanoncecved {
  background-image: linear-gradient(45deg,
  white 0%,
  white 30%,
  rgb(28, 159, 193) 30%,
  rgb(28, 159, 193) 70%,
  white 70%,
  white 100%);
  }

.kepanoncecved.second{
  background-image: linear-gradient(
  white 0%,
  white 30%,
  rgb(175, 51, 141) 30%,
  rgb(175, 51, 141) 70%,
  white 70%,
  white 100%);
}

.kepanoncecved.third{
  background-image: linear-gradient(45deg,
  white 0%,
  white 30%,
  rgb(64, 202, 82) 30%,
  rgb(64, 202, 82) 70%,
  white 70%,
  white 100%);
}

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

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

06 Апреля 2019 Загрузок: 1 Просмотров: 1515 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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