Back to CSS Button Hover Effects Hard Shadow Shift Pure CSS
Share
HTML
<button class="bhe-13__btn">CLICK ME</button>
CSS
.bhe-13__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-13__btn {
  color: #0a0a0f;
  background: #f0eeff;
  border: 2px solid #0a0a0f;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  box-shadow: 4px 4px 0 #0a0a0f;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.bhe-13__btn:hover {
  box-shadow: 8px 8px 0 #7c6cff;
  transform: translate(-2px, -2px);
}
.bhe-13__btn:active {
  box-shadow: 2px 2px 0 #0a0a0f;
  transform: translate(2px, 2px);
}