Brushed Metal Button
An anodized, brushed aluminum button in a recessed bezel, tinted by your accent, with a power LED that breathes slowly like a sleeping laptop. Pressing flips the shading so the plate looks pushed in.
Also known as: metal button css, chrome button css, skeuomorphic metal button.
HTML
<button class="btn-brushed-metal" type="button"> <span class="btn-brushed-metal-led" aria-hidden="true"></span> <span class="btn-brushed-metal-label">Power on</span> </button>
CSS
.btn-brushed-metal {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
isolation: isolate;
gap: 0.7em;
padding: 0.8em 1.7em 0.8em 1.35em;
border: 1px solid color-mix(in srgb, var(--c) 22%, #6b7280);
border-radius: 0.6em;
background:
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 0.09em, rgba(0, 0, 0, 0.04) 0.09em calc(0.09em + 1px), transparent calc(0.09em + 1px) 0.17em),
repeating-linear-gradient(90deg, transparent 0 0.9em, rgba(255, 255, 255, 0.08) 0.9em 1.6em, transparent 1.6em 2.1em, rgba(0, 0, 0, 0.025) 2.1em 3.3em),
linear-gradient(180deg,
color-mix(in srgb, var(--c) 10%, #f8fafc),
color-mix(in srgb, var(--c) 18%, #d1d5db) 48%,
color-mix(in srgb, var(--c) 22%, #b4bac5) 52%,
color-mix(in srgb, var(--c) 12%, #e5e7eb));
color: color-mix(in srgb, var(--c) 40%, #1f2937);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 0.12em 0.25em rgba(0, 0, 0, 0.28),
0 0 0 0.25em color-mix(in srgb, var(--c) 10%, #cfd4db),
0 0 0 calc(0.25em + 1px) color-mix(in srgb, var(--c) 20%, #8b939e);
transition: box-shadow 0.08s ease-out;}
.btn-brushed-metal::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #aeb4bf), color-mix(in srgb, var(--c) 12%, #dfe3e8));
opacity: 0;
transition: opacity 0.08s ease-out;
}
.btn-brushed-metal-led {
position: relative;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 35%, #4b5563);
box-shadow: inset 0 0.05em 0.1em rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-brushed-metal-led::after {
content: "";
position: absolute;
inset: 0.08em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 65%, #fff);
box-shadow: 0 0 0.45em 0.08em var(--c);
animation: btn-brushed-metal-breathe 3.2s ease-in-out infinite;
}
.btn-brushed-metal-label,
.btn-brushed-metal-led { transition: transform 0.08s ease-out; }
.btn-brushed-metal:active {
box-shadow:
inset 0 0.1em 0.25em rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.6),
0 0 0 transparent,
0 0 0 0.25em color-mix(in srgb, var(--c) 10%, #cfd4db),
0 0 0 calc(0.25em + 1px) color-mix(in srgb, var(--c) 20%, #8b939e);
}
.btn-brushed-metal:active::before { opacity: 1; }
.btn-brushed-metal:active .btn-brushed-metal-label { transform: translateY(0.06em); }
.btn-brushed-metal:active .btn-brushed-metal-led { transform: translateY(0.06em); }
.btn-brushed-metal:active .btn-brushed-metal-led::after {
animation: none;
opacity: 1;
}
@keyframes btn-brushed-metal-breathe {
0%, 100% { opacity: 0.15; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn-brushed-metal, .btn-brushed-metal *, .btn-brushed-metal::before, .btn-brushed-metal::after, .btn-brushed-metal *::before, .btn-brushed-metal *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.