Back to CSS Button Hover Effects Elastic Lift Pure CSS
Share
HTML
<button class="bhe-07__btn">Click Me</button>
CSS
.bhe-07__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-07__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  box-shadow: 0 4px 0 #4a3aad;
  transform: translateY(0);
  transition:
    transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.12s;
}
.bhe-07__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #4a3aad;
}
.bhe-07__btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4a3aad;
}