Windows 95 Button
The gray beveled button from Windows 95: two-tone inset borders light from the top left and flip when you click, the label steps one pixel down and right, and focus draws the dotted rectangle.
Also known as: win95 button css, windows 98 button css, retro bevel button.
HTML
<button class="btn-win95" type="button"><span class="btn-win95-label"><svg class="btn-win95-icon" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M1 1h11l3 3v11H1z"/><path fill="#fff" d="M4 1h7v5H4z"/><path fill="currentColor" d="M8 2h2v3H8z"/><path fill="#fff" d="M3 9h10v6H3z"/></svg>Save</span></button>
CSS
.btn-win95 {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.5em;
padding: 0.4em 0.9em;
border: 0;
border-radius: 0;
background: color-mix(in srgb, var(--c) 5%, #c0c0c0);
color: #000;
font: 400 var(--btn-size, 18px)/1.2 Tahoma, "MS Sans Serif", Geneva, "Segoe UI", sans-serif;
cursor: pointer;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
-webkit-tap-highlight-color: transparent;
}
.btn-win95-label {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.1em 0.35em;
outline: 1px dotted transparent;
transition: transform 0.03s linear;
}
.btn-win95-icon {
width: 1em;
height: 1em;
color: color-mix(in srgb, var(--c) 70%, #000080);
}
.btn-win95:focus-visible { outline: none; }
.btn-win95:focus-visible .btn-win95-label { outline-color: #000; }
.btn-win95:active {
box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
}
.btn-win95:active .btn-win95-label { transform: translate(1px, 1px); }
@media (prefers-reduced-motion: reduce) {
.btn-win95, .btn-win95 *, .btn-win95::before, .btn-win95::after, .btn-win95 *::before, .btn-win95 *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button class="group min-w-[7rem] bg-[#c0c0c0] px-4 py-1.5 font-[Tahoma,sans-serif] text-black shadow-[inset_-1px_-1px_#0a0a0a,inset_1px_1px_#fff,inset_-2px_-2px_#808080,inset_2px_2px_#dfdfdf] focus:outline-none active:shadow-[inset_1px_1px_#0a0a0a,inset_-1px_-1px_#fff,inset_2px_2px_#808080,inset_-2px_-2px_#dfdfdf]"> <span class="inline-block px-1 outline-1 outline-dotted outline-transparent group-focus-visible:outline-black group-active:translate-x-px group-active:translate-y-px">Save</span> </button>
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.