Back to CSS Buttons Cigar Band Pure CSS
Share
HTML
<button class="btn-cigar">
  <span class="btn-cigar-edge" aria-hidden="true"></span>
  <span class="btn-cigar-text">PRIVATE CLUB</span>
</button>
CSS
.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); }