Back to CSS Button Hover Effects Morph Shape Pure CSS
Share
HTML
<button class="bhe-16__btn">Hover Me</button>
CSS
.bhe-16__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-16__btn {
  background: #ff6c8a;
  color: #fff;
  border: none;
  transition:
    border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.3s,
    transform 0.2s;
}
.bhe-16__btn:hover {
  border-radius: 50px;
  background: #7c6cff;
  transform: scaleX(0.92);
}