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

Красивый эффект кнопки "Атом" на HTML + CSS

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

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

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

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

Анимированная кнопка "Атома" на чистом CSS

Установка:

HTML

Код

<div class="atomos_okruglen">
  <div class="zoren">
  <span>ZORNET.RU</span>
  <div class="knopku"></div>
  </div>
</div>

CSS

Код

.zoren {
position: relative; margin: 0 auto;
  width: var(--btn-w);
  color: #9ce4ff;
  border: 0.15em solid #90dcfb;
  border-radius: 5em;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.3em;
  line-height: 2em;
  cursor: pointer;
}
.knopku {
  content: '';
  position: absolute;
  top: 0;
  width: var(--dot-w);
  height: 100%;
  border-radius: 100%;
  transition: all 300ms ease;
  display: none;
}
.knopku:after {
  content: '';
  position: absolute;
  left: calc(50% - .4em);
  top: -.4em;
  height: .8em;
  width: .8em;
  background: var(--primary);
  border-radius: 1em;
  border: .25em solid var(--solid);
  box-shadow: 0 0 .7em var(--solid),
  0 0 2em var(--primary);
}
.zoren:hover .knopku,
.zoren:focus .knopku {
  animation: atom 2s infinite linear;
  display: block;
}
@keyframes atom {
  0% {transform: translateX(0) rotate(0);}
  30%{transform: translateX(var(--tr-X)) rotate(0);}
  50% {transform: translateX(var(--tr-X)) rotate(180deg);}
  80% {transform: translateX(0) rotate(180deg);}
  100% {transform: translateX(0) rotate(360deg);}
}

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

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

25 Октября 2021 Загрузок: 2 Просмотров: 984 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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