If you have ever pressed a physical button and loved that little pop, you can recreate that same feeling on the web with a bit of CSS. In this tutorial, I will show you how to create 3D buttons using CSS, starting with a quick beginner friendly example, then moving to a complete, accessible pattern that you can drop into real projects. I will explain each key property in plain language, so even if you are new to CSS, you can follow along.
What makes a CSS button look 3D
A 3D button is all about depth and motion. You create the illusion of depth with shadows and highlights, then reinforce it with subtle movement when the user hovers or presses.
- Shadow creates the button’s edge. A bottom shadow that does not blur looks like a solid edge, so the button appears raised.
- A soft drop shadow makes it float slightly off the surface.
- A gentle top to bottom gradient suggests light coming from above.
- Motion on hover and press seals the effect. On hover the button lifts a little; on press it moves down, the edge shrinks.
In CSS terms that means using box-shadow, linear-gradient, and transform: translateY(...), with short transition times to feel clicky.
Example 1: 3D button using CSS
This is the fastest way to see the 3D effect. It uses a simple <div>. For real interfaces I prefer a <button> element, but this keeps the first test short.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quick 3D Button with CSS</title>
<style>
:root {
--bg-top: #38bdf8;
--bg-bottom: #0284c7;
--edge: #075985;
--text: #ffffff;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: radial-gradient(60% 60% at 50% 20%, #101826, #0b1220 60%);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: #e5e7eb;
padding: 2rem;
}
.btn3d {
display: inline-block;
padding: 0.9rem 1.4rem;
color: var(--text);
background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
border-radius: 0.75rem;
font-weight: 800;
text-decoration: none;
box-shadow:
0 0 0 1px rgba(255,255,255,0.08) inset, /* subtle inner rim */
0 0.5rem 0 var(--edge), /* hard bottom edge */
0 0.9rem 1.2rem rgba(0,0,0,0.35); /* soft drop shadow */
transform: translateY(0);
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
cursor: pointer;
user-select: none;
}
.btn3d:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.10) inset,
0 0.6rem 0 var(--edge),
0 1.05rem 1.35rem rgba(0,0,0,0.4);
}
.btn3d:active {
transform: translateY(4px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.12) inset,
0 0.2rem 0 var(--edge),
0 0.5rem 0.9rem rgba(0,0,0,0.35);
filter: brightness(0.98);
}
</style>
</head>
<body>
<div class="btn3d" role="button" tabindex="0">Click me</div>
</body>
</html>
Output:
Key pieces explained:
- The hard bottom edge comes from a non blurred shadow. Example:
box-shadow: 0 0.5rem 0 var(--edge). There is no blur value here, so it looks like a solid strip that acts as the button’s edge. - The soft drop shadow adds float. Example:
0 0.9rem 1.2rem rgba(0,0,0,0.35). The last value is blur, which makes it look soft. - The press is a tiny downward move. Example:
.btn3d:active { transform: translateY(4px); }. I also reduced the edge height so it looks pressed.
Example 2: Complete accessible 3D buttons with CSS
Now let me turn that idea into a reusable, accessible pattern, with sizes, color themes, focus styles, and a disabled state. This version uses <button>, which is better for keyboard and screen readers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>3D Buttons with CSS - Complete Example</title>
<style>
:root {
--bg: #0b1220;
--fg: #e5e7eb;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: radial-gradient(60% 60% at 50% 20%, #101826, #0b1220 60%);
color: var(--fg);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
line-height: 1.5;
}
.wrapper { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 1rem; }
.lead { color: #cbd5e1; margin-top: 0; }
.section { margin-top: 1.5rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
/* 3D button base */
.btn-3d {
--btn-bg-hi: #60a5fa;
--btn-bg-lo: #2563eb;
--btn-edge: #1e3a8a;
--btn-text: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
appearance: none;
border: 0;
border-radius: .85rem;
padding: .9em 1.2em;
font: 800 1rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--btn-text);
background-image: linear-gradient(180deg, var(--btn-bg-hi), var(--btn-bg-lo));
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 .5em 0 var(--btn-edge),
0 .85em 1.2em rgba(0,0,0,.35);
transform: translateY(0);
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background 120ms ease;
cursor: pointer;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
}
/* glossy top highlight */
.btn-3d::before {
content: "";
position: absolute;
inset: 2px 2px auto 2px;
height: 40%;
border-radius: .75rem .75rem .5rem .5rem;
background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
pointer-events: none;
}
/* motion and depth states */
.btn-3d:hover {
transform: translateY(-.15em);
box-shadow:
0 0 0 1px rgba(255,255,255,.1) inset,
0 .6em 0 var(--btn-edge),
0 1.05em 1.35em rgba(0,0,0,.4);
}
.btn-3d:active {
transform: translateY(.45em);
box-shadow:
0 0 0 1px rgba(255,255,255,.14) inset,
0 .2em 0 var(--btn-edge),
0 .5em .9em rgba(0,0,0,.32);
filter: brightness(.98);
}
.btn-3d:focus-visible {
outline: 0;
box-shadow:
0 0 0 3px rgba(255,255,255,.6),
0 0 0 5px rgba(59,130,246,.8),
0 .5em 0 var(--btn-edge),
0 .85em 1.2em rgba(0,0,0,.35);
}
/* sizes */
.btn--sm { font-size: .9rem; padding: .65em .9em; border-radius: .7rem; }
.btn--lg { font-size: 1.125rem; padding: 1.05em 1.4em; border-radius: 1rem; }
/* color themes */
.btn--primary { --btn-bg-hi: #60a5fa; --btn-bg-lo: #2563eb; --btn-edge: #1e3a8a; --btn-text: #fff; }
.btn--success { --btn-bg-hi: #34d399; --btn-bg-lo: #059669; --btn-edge: #065f46; --btn-text: #fff; }
.btn--warning { --btn-bg-hi: #fbbf24; --btn-bg-lo: #d97706; --btn-edge: #92400e; --btn-text: #1f2937; }
.btn--danger { --btn-bg-hi: #fb7185; --btn-bg-lo: #e11d48; --btn-edge: #7f1d1d; --btn-text: #fff; }
.btn--neutral { --btn-bg-hi: #f3f4f6; --btn-bg-lo: #d1d5db; --btn-edge: #6b7280; --btn-text: #111827; }
/* disabled state */
.btn-3d[disabled], .btn-3d[aria-disabled="true"] {
pointer-events: none;
opacity: .65;
filter: saturate(.7) contrast(.9);
transform: none;
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 .3em 0 var(--btn-edge),
0 .7em 1em rgba(0,0,0,.28);
cursor: not-allowed;
}
/* icon slot */
.btn-3d .icon { display: inline-block; line-height: 0; font-size: 1.1em; }
</style>
</head>
<body>
<div class="wrapper">
<h1>3D Buttons with CSS, complete example</h1>
<p class="lead">Click or tap the buttons to see the lift and press effect. Resize the window; everything stays responsive.</p>
<div class="section">
<div class="btn-row">
<button class="btn-3d btn--primary btn--lg"><span class="icon">🚀</span> Launch</button>
<button class="btn-3d btn--success">Confirm</button>
<button class="btn-3d btn--warning">Later</button>
<button class="btn-3d btn--danger btn--sm"><span class="icon">✖️</span> Delete</button>
<button class="btn-3d btn--neutral" disabled>Disabled</button>
</div>
</div>
<div class="section">
<div class="grid">
<button class="btn-3d btn--primary">Primary</button>
<button class="btn-3d btn--success">Success</button>
<button class="btn-3d btn--warning">Warning</button>
<button class="btn-3d btn--danger">Danger</button>
<button class="btn-3d btn--neutral">Neutral</button>
<button class="btn-3d btn--primary btn--sm">Small</button>
<button class="btn-3d btn--primary btn--lg">Large</button>
</div>
</div>
</div>
</body>
</html>
Output:
How the important lines work:
- The edge illusion uses a hard shadow. Example:
0 .5em 0 var(--btn-edge). That single line draws the edge below the button body. - Pressed state reduces the edge height and shifts the button. Example:
.btn-3d:active { transform: translateY(.45em); box-shadow: 0 .2em 0 var(--btn-edge), ... }. Your eyes see less edge, so it looks pressed. - The gradient simulates light from above. Example:
background-image: linear-gradient(180deg, var(--btn-bg-hi), var(--btn-bg-lo)). Lighter at the top, darker at the bottom.
Practical tips for better CSS 3D buttons
- Keep transitions short. I use
120ms. Long times feel sluggish. - Use relative units like
emfor shadows and spacing, so sizes scale well withfont-size. - Remember accessibility. Use
<button>, keep good contrast, add a clear:focus-visibleoutline. - On touch screens
:hoveris not always shown. The:activestate still works on tap.
Wrapping up
You have seen how to create 3D buttons using CSS, from a tiny demo to a complete, accessible set. The key ingredients are a hard bottom edge, a soft drop shadow, a subtle gradient, and a small vertical movement on interaction. Start with the quick example, then adapt the full version to your brand by changing the color variables. With these patterns, your interface will feel more tactile without extra libraries.
Try our: Duplicate CSS Remover
