Cigar Band
Gold filigree foil seal over a maroon ribbon; ornate Victorian club-lounge energy.
Cigar Band the 38th 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-cigar"> <span class="btn-cigar-edge" aria-hidden="true"></span> <span class="btn-cigar-text">PRIVATE CLUB</span> </button>
.btn-cigar {
position: relative;
padding: 14px 36px;
border: 2px solid #d4a017;
border-radius: 2px;
background:
repeating-radial-gradient(circle at 50% 50%, rgba(212,160,23,0.1) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(212,160,23,0.06) 0 2px, transparent 2px 6px),
linear-gradient(180deg, #6a2540 0%, #5a1d2c 60%, #3a0e1a 100%);
color: #d4a017;
font-family: ui-serif, Georgia, serif;
font-size: 13px; font-weight: 800;
letter-spacing: 0.28em;
cursor: pointer;
box-shadow:
inset 0 0 0 4px rgba(212,160,23,0.15),
inset 0 1px 0 rgba(212,160,23,0.4),
0 6px 16px rgba(58,14,26,0.4);
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
transition: filter 0.18s, transform 0.2s;
}
.btn-cigar-edge {
position: absolute; inset: 4px;
border: 1px solid #d4a017;
pointer-events: none;
}
.btn-cigar:hover { filter: brightness(1.1); transform: translateY(-1px); }