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

Великолепный CSS эффект нажатия кнопки

Если тебе нужны кнопки для сайта, где идет видный эффект при клике, то этот материал явно тебе будет интересен, так как здесь кнопки на HTML и JS. Давайте изначально отталкиваться от стандартной кнопки, где идет стиль, что отвечает за изменение цветовой гаммы на кнопки. Здесь вы наводите клик в любом месте самой основы и делаете клик перехода, то автоматически мы видим красивый эффект.

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

Проверено, где был добавлен обвод:

Кнопки с эффектом для сайта на чистом CSS

Установочный процесс:

HTML

Код

<div id="kolepnaya-knopka">
  <div id="daskaya-knopka">
  <button>ZORNET.RU</button>
  <button>ZORNET.RU #2</button>
  <button>ZORNET.RU #3</button>
  <button>ZORNET.RU #4</button>
  </div>
</div>

CSS

Код

#kolepnaya-knopka {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#daskaya-knopka {
  flex: 5;
}
button {
  position: relative;
  display: block;
  width: 14em;
  height: 4em;
  margin: 2em;
  border: none;
  outline: none;
  letter-spacing: .2em;
  font-weight: bold;
  background: #e0d9d9;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 3px;
  border: 2px solid #fffcfc;
  box-shadow: -1px 2px 10px rgba(128, 121, 121, 0.54), -1px 4px 14px -15px rgba(43, 40, 40, 0);
}
button:nth-child(2) {
  color: #f7efef;
  background: #187b90;
}
button:nth-child(3) {
  color: #f9f8f8;
  background: #2a4988;
}
button:nth-child(4) {
  color: #f5efef;
  background: #b9572d;
}
.gumines {
  position: absolute;
  background: rgba(0,0,0,.15);
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  pointer-events: none;
}
.gumines.show {
  -webkit-animation: ripple .75s ease-out;
  animation: ripple .75s ease-out;
}
@-webkit-keyframes ripple {
  to {
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  }
}
@keyframes ripple {
  to {
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  }
}

Код

var addRippleEffect = function (e) {
  var target = e.target;
  if (target.tagName.toLowerCase() !== 'button') return false;
  var rect = target.getBoundingClientRect();
  var ripple = target.querySelector('.gumines');
  if (!ripple) {
  ripple = document.createElement('span');
  ripple.className = 'gumines';
  ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
  target.appendChild(ripple);
  }
  ripple.classList.remove('show');
  var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
  var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
  ripple.style.top = top + 'px';
  ripple.style.left = left + 'px';
  ripple.classList.add('show');
  return false;
}

document.addEventListener('click', addRippleEffect, false);

Для создания кнопки с эффектами задействуем JavaScript и CSS, где JS должен определить место щелчка и начать анимацию от заданной точки.

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

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

15 Ноября 2019 Загрузок: 1 Просмотров: 1013 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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