Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create pill buttons with CSS?
Pill buttons are rounded, capsule-shaped buttons that provide a modern and clean appearance to web interfaces. They are created by applying a large border-radius value to regular buttons, giving them their characteristic pill-like shape.
Syntax
button {
border-radius: value;
padding: vertical horizontal;
border: none;
}
Key Properties for Pill Buttons
| Property | Purpose | Typical Value |
|---|---|---|
border-radius |
Creates rounded corners | 25px or higher |
padding |
Adds internal spacing | 10px 20px |
border |
Removes default border | none |
Example: Basic Pill Buttons
The following example demonstrates how to create pill buttons with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
.pill-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
text-align: center;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s;
}
.pill-button:hover {
background-color: #45a049;
}
.pill-secondary {
background-color: #008CBA;
}
.pill-secondary:hover {
background-color: #007B9A;
}
</style>
</head>
<body>
<h2>Pill Buttons Example</h2>
<button class="pill-button">Primary Button</button>
<button class="pill-button pill-secondary">Secondary Button</button>
<button class="pill-button" style="background-color: #f44336;">Danger Button</button>
</body>
</html>
Three pill-shaped buttons appear: a green "Primary Button", a blue "Secondary Button", and a red "Danger Button". Each button has rounded corners and changes color slightly when hovered over.
Example: Different Pill Button Sizes
You can create pill buttons of various sizes by adjusting padding and font-size −
<!DOCTYPE html>
<html>
<head>
<style>
.pill-small {
background-color: #FF9800;
color: white;
border: none;
padding: 8px 16px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
margin: 5px;
}
.pill-large {
background-color: #9C27B0;
color: white;
border: none;
padding: 16px 32px;
font-size: 18px;
border-radius: 30px;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<h2>Different Pill Button Sizes</h2>
<button class="pill-small">Small Pill</button>
<button class="pill-large">Large Pill</button>
</body>
</html>
Two pill buttons of different sizes appear: a smaller orange "Small Pill" button and a larger purple "Large Pill" button, both with appropriately rounded corners.
Conclusion
Pill buttons are created using the border-radius property with values typically above 20px. The key is ensuring the border-radius is large enough to create smooth, rounded ends that give the characteristic pill shape.
Updated on: 2026-03-15T14:32:21+05:30
3K+ Views
Advertisements