Copper Coin
Aged copper disc with verdigris patina blooming around the rim. Hover spins the patina conically.
Copper Coin the 19th 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-copper"> <span class="btn-copper-rim" aria-hidden="true"></span> <span class="btn-copper-text">Mint</span> </button>
@property --btn-copper-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-copper {
position: relative;
width: 96px; height: 96px;
border: none; border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, #e8b878 0%, #b87333 55%, #6a3f15 100%);
color: #3a2410;
font-family: ui-serif, Georgia, serif;
font-size: 12px; font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
isolation: isolate;
box-shadow:
inset 0 -3px 6px rgba(0,0,0,0.4),
inset 0 2px 3px rgba(255,255,255,0.4),
0 6px 14px rgba(0,0,0,0.3);
--btn-copper-angle: 0deg;
transition: --btn-copper-angle 4s linear, transform 0.18s ease;
}
.btn-copper-rim {
position: absolute; inset: 4px;
border-radius: 50%;
background: conic-gradient(from var(--btn-copper-angle),
transparent 0deg,
#5d8a73aa 30deg,
transparent 80deg,
#88a896aa 200deg,
transparent 260deg,
#5d8a73aa 320deg,
transparent 360deg);
filter: blur(2px);
pointer-events: none;
-webkit-mask: radial-gradient(circle, transparent 60%, #000 70%);
mask: radial-gradient(circle, transparent 60%, #000 70%);
}
.btn-copper-text { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,232,180,0.4); }
.btn-copper:hover {
--btn-copper-angle: 360deg;
transform: scale(1.04);
}