Velvet Ribbon
Wine-velvet pill with gilt edges; the nap shimmers like brushed fabric on hover.
Velvet Ribbon the 27th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-velvet"> <span class="btn-velvet-text">RSVP</span> </button>
.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);
}