Back to CSS Button Hover Effects 3D Press Pure CSS
Share
HTML
<button class="bhe-21__btn">3D Press</button>
CSS
.bhe-21__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-21__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow:
    0 6px 0 #4a3ab0,
    0 8px 16px rgba(74, 58, 176, 0.4);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-21__btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 #4a3ab0,
    0 14px 24px rgba(74, 58, 176, 0.45);
}
.bhe-21__btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #4a3ab0,
    0 4px 8px rgba(74, 58, 176, 0.3);
}