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

Кнопка индикатор прогресса с помощью CSS

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

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

Так она выглядит при установочном процессе

Кнопка с красивым эффектом при наведение клика

Кнопка на чистом CSS с кольцевым индикатором

Кнопка с градиентом и эффектами на CSS

Установка:

HTML

Код
<div class="knupka-meganea">
  <button class="kegounad">ZORNET.RU</button>
</div>

CSS

Код
.knupka-meganea {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kegounad {
  min-width: 324px;
  min-height: 58px;
  font-family: 'Nunito', sans-serif;
  font-size: 23px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #eeeef5;
  background: #21847b;
  background: linear-gradient(90deg, rgb(41 124 138) 0%, rgb(208 5 145) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgb(109 71 171 / 64%);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
}

button::before {
  content: '';
  border-radius: 1000px;
  min-width: calc(324px + 12px);
  min-height: calc(58px + 12px);
  border: 6px solid rgb(110 150 208);
  box-shadow: 0 0 60px rgb(165 26 151 / 64%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.kegounad:hover, .kegounad:focus {
  color: #e1e1e8;
  transform: translateY(-6px);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

button::after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 6px solid #5100ff;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
  width: 30px;
  height: 30px;
  opacity: 1;
  }
  100% {
  width: 324px;
  height: 324px;
  opacity: 0;
  }
}

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

Демонстрация
2021-01-24 Загрузок: 1 Просмотров: 461 Комментарий: (2)

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

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

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

Комментарий: 2
BALLAS
BALLAS 2021-01-28 20:431
0
Красивая кнопка 09a
Kosten
Kosten 2021-01-28 23:112
0
Она не одна по своему эффекту на сайте.
avatar