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

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

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

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

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

Атомная кнопки для сайта на чистом CSS3

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

Анимированная кнопка "Атома" на чистом 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);}
}

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

Демонстрация
2021-10-25 Загрузок: 1 Просмотров: 318 Комментарий: (0)

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

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

Оставь свой отзыв

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