Button

Create a clear button with a satisfying hover.

Button textFillTextRoundnessPaddingHover lift

See the CSS

.cf-button {
  border: 0;
  border-radius: 12px;
  padding: 16px 24px;
  background: #315cff;
  color: #ffffff;
  font: 700 1rem/1 sans-serif;
  cursor: pointer;
  transition: transform 160ms ease;
}
.cf-button:hover, .cf-button:focus-visible { transform: translateY(-4px); }