Back to CSS Buttons Velvet Ribbon Pure CSS
Share
HTML
<button class="btn-velvet">
  <span class="btn-velvet-text">RSVP</span>
</button>
CSS
.btn-velvet {
  position: relative;
  padding: 13px 36px;
  border: 2px solid #d4a017;
  border-radius: 999px;
  background:
    repeating-linear-gradient(115deg,
      rgba(212,160,23,0.06) 0 1px,
      transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, #6a2235 0%, #5a1d2c 60%, #3a0e1a 100%);
  color: #f5d678;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(245,214,120,0.25),
    inset 0 -8px 18px rgba(0,0,0,0.4),
    0 4px 14px rgba(58,14,26,0.45);
  transition: filter 0.3s ease, transform 0.2s ease;
}
.btn-velvet:hover {
  filter: brightness(1.18) saturate(1.1);
  transform: translateY(-1px);
}