CSS Pill Buttons with 3D Effects
Build a reusable CSS reference for elevated pill-shaped buttons with shadow depth.
Introduction
30 Second Summary
Buttons are everywhere on the web, but most look flat and forgettable. The ones that feel satisfying to click have a subtle 3D depth that makes them look like they're floating off the page.
In this project, you will build a single-file CSS reference containing three pill-shaped buttons with layered shadows that create a "popping out" effect. You can reuse this pattern in any future project.
What You'll Build
A self-contained HTML file with three elevated pill buttons styled to complement a light background, ready to open in any browser.
By the end of this project, you'll have:
- A single buttons.html file with embedded CSS you can reference anytime.
- Three pill buttons with layered box-shadows creating a 3D depth effect.
- A hover state that lifts the button upward for interactivity.
- Secret Mission: Add a press-down animation so buttons feel like they physically push in when clicked.
Are there any prerequisites?
You only need basic HTML and CSS knowledge. No frameworks, build tools, or accounts required.
Create the Reference File
Pill-shaped buttons with a 3D "popping out" effect are a subtle but effective design pattern. They make interactive elements feel tangible and clickable.
In this step, you will create a single HTML file containing three styled pill buttons. The file uses layered CSS shadows and gradients to achieve that elevated, tactile look.
In this step, get ready to:
- Create a new HTML file for your button reference.
- Add layered box-shadow and gradient styles for a 3D pill button.
- View the finished buttons in your browser.
Create buttons.html
- In your text editor, create a new file.
- Save the file to your Desktop with the name buttons.html.
Why the Desktop?
Saving to the Desktop makes the file easy to find when you open it in your browser. You can move it later if you want to keep a tidier project folder.
Add the page structure and layout styles
The file is split into three sections: page layout CSS, the pill button technique, and the HTML buttons themselves. You will build it up in three parts.
- Start your buttons.html file with the HTML boilerplate and layout CSS by pasting this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pill Buttons Reference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
gap: 24px;
}
h1 {
font-size: 1.8rem;
color: #1a1a1a;
font-weight: 600;
}
.button-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}What does this code do?
- The * reset removes default browser margins and padding so your layout starts from a clean slate.
- The body uses flexbox to center everything vertically and horizontally on a #F9F9F9 off-white background.
- The .button-group class lays the buttons out in a horizontal row with even spacing.
You won't see a change yet. The next chunk adds the core button styles.
- Directly below the .button-group rule, paste the pill button styles and hover interaction:
.pill-btn {
padding: 14px 32px;
border: none;
border-radius: 9999px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
/*
* SHADOW LAYERS (creates the 3D "pop" effect):
* 1st layer: tight shadow directly below for hard edge
* 2nd layer: softer, larger spread for ambient depth
* 3rd layer: subtle highlight on top edge (inset)
*/
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(0, 0, 0, 0.08),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
/* Hover: lift the button slightly higher */
.pill-btn:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.15),
0 10px 24px rgba(0, 0, 0, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
}How do the shadow layers create a 3D effect?
The box-shadow property accepts multiple comma-separated shadows. Each layer adds a different type of depth.
- The first shadow is tight and dark, creating a hard edge directly under the button.
- The second shadow is softer and larger, adding an ambient glow that makes the button feel elevated.
- The third shadow uses inset to place a faint white highlight on the top edge, simulating light hitting a raised surface.
On hover, translateY(-2px) lifts the button upward while the shadows grow larger, making it feel like the button is floating higher off the page.
You won't see a change yet. The next chunk adds the button colors and closes the file.
- Finish the file by pasting the color variants and HTML body below the hover rule:
/* --- BUTTON COLOR VARIANTS --- */
.pill-btn--coral {
background: linear-gradient(180deg, #FF7A5C 0%, #FF5733 100%);
color: #ffffff;
}
.pill-btn--purple {
background: linear-gradient(180deg, #A878F0 0%, #8B5CF6 100%);
color: #ffffff;
}
.pill-btn--blue {
background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
color: #ffffff;
}
</style>
</head>
<body>
<h1>What will you learn next?</h1>
<div class="button-group">
<button class="pill-btn pill-btn--coral">AI Projects</button>
<button class="pill-btn pill-btn--purple">Cloud Engineering</button>
<button class="pill-btn pill-btn--blue">Web Development</button>
</div>
</body>
</html>What do the gradients do?
Each color variant uses linear-gradient(180deg, ...) to transition from a slightly lighter shade at the top to the full color at the bottom. This creates a subtle curved-surface illusion that reinforces the 3D feel.
The border-radius: 9999px value on .pill-btn guarantees a pill shape regardless of button height or text length.
- Save buttons.html.
✔️ Awesome, I've got everything!
Great. Double check you have saved your file before moving on.
ⓧ I'd like to double check the full code
Here is the complete buttons.html file. Make sure yours matches exactly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pill Buttons Reference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F9F9F9;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
gap: 24px;
}
h1 {
font-size: 1.8rem;
color: #1a1a1a;
font-weight: 600;
}
.button-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.pill-btn {
padding: 14px 32px;
border: none;
border-radius: 9999px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
/*
* SHADOW LAYERS (creates the 3D "pop" effect):
* 1st layer: tight shadow directly below for hard edge
* 2nd layer: softer, larger spread for ambient depth
* 3rd layer: subtle highlight on top edge (inset)
*/
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(0, 0, 0, 0.08),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
/* Hover: lift the button slightly higher */
.pill-btn:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.15),
0 10px 24px rgba(0, 0, 0, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
/* --- BUTTON COLOR VARIANTS --- */
.pill-btn--coral {
background: linear-gradient(180deg, #FF7A5C 0%, #FF5733 100%);
color: #ffffff;
}
.pill-btn--purple {
background: linear-gradient(180deg, #A878F0 0%, #8B5CF6 100%);
color: #ffffff;
}
.pill-btn--blue {
background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
color: #ffffff;
}
</style>
</head>
<body>
<h1>What will you learn next?</h1>
<div class="button-group">
<button class="pill-btn pill-btn--coral">AI Projects</button>
<button class="pill-btn pill-btn--purple">Cloud Engineering</button>
<button class="pill-btn pill-btn--blue">Web Development</button>
</div>
</body>
</html>Open the file in your browser
- Find buttons.html on your Desktop.
- Double-click the file to open it in your default browser.
Use Chrome for best results
If the file opens in a different browser, right-click buttons.html and choose Open with > Google Chrome.
You should see three colourful pill-shaped buttons centered on a light grey background. The heading "What will you learn next?" appears above them.
- Hover over each button. You should see it lift slightly and its shadow grow, creating a floating effect.
Buttons not showing or unstyled?
- Make sure you saved the file with the .html extension, not .txt. Some text editors add .txt by default.
- Check for missing closing braces or mismatched quotes. A single missing character in CSS can break all styles below it.
- Use the "double check the full code" tab above to compare your file character by character.
Why aren't my pill buttons showing any styles?
Secret mission
Add a Press-Down Animation on Click
Your buttons lift on hover, but what about when someone clicks? Add a press-down animation so the button feels like it physically pushes into the page.
Clean Up Your Resources
Clean Up Your Resources
This project runs entirely locally, so there are no ongoing costs. Decide whether to keep your reference file or delete it.
Resources you used:
- Local file: buttons.html on your Desktop.
Keep everything running
No action needed. Choose this if you plan to reference or extend your button styles in future projects.
- Your buttons.html file stays on your Desktop, ready to open anytime you need the CSS.
Pause - I'll come back to this later
Since this is a single local file with no running processes, there is nothing to pause. Your file sits quietly on disk until you need it again.
- No action required. The file uses no memory or CPU when it is not open in a browser.
Delete - I don't want to use this again
Remove the project file from your Desktop entirely.
- Delete buttons.html by running this command in your terminal:
rm ~/Desktop/buttons.html- On Windows, run this instead:
Remove-Item ~\Desktop\buttons.html- Confirm the file is gone by running ls ~/Desktop (macOS/Linux) or dir ~\Desktop (Windows). You should no longer see buttons.html in the output.
Nice Work!
Nice Work!
You now have a reusable CSS reference file for pill-shaped buttons with a 3D shadow effect, inspired by the learn.nextwork.org homepage.
Here's what you learned:
- Creating a pill shape using border-radius: 9999px that adapts to any button size.
- Building a 3D elevation effect with layered box-shadow values and an inset highlight.
- Adding a hover lift using transform: translateY() combined with enlarged shadows to increase perceived depth.
- Secret Mission: Adding a press-down click animation using the :active pseudo-class with reduced shadows and a downward transform.
Ready to quiz yourself?