ZorNet.Ru — сайт для вебмастера » HTML и 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 с кольцевым индикатором будет отличным индикатором, все для того, чтоб при открытие сайта гости или пользователи сразу заметили такую стилистику, где по клику можно перейти на основной материал или статью.

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

24 Января 2021 Загрузок: 2 Просмотров: 1029 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: BALLAS 28 Января 2021 20:43¹ 0 Красивая кнопка Kosten 28 Января 2021 23:11² 0 Она не одна по своему эффекту на сайте.