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
Creating an Animated Pill Shaped button using HTML and CSS
A pill?shaped button is a round corner attractive?looking button that resembles a pill or capsule. These buttons provide a modern, smooth appearance and can include transitions and hover effects for an enhanced user experience. This type of button design is commonly used for sign?up forms, call?to?action buttons, and navigation elements.
Syntax
.button {
border-radius: value;
transition: property duration;
}
.button:hover {
background-color: color;
}
Key Properties
| Property | Purpose |
|---|---|
border-radius |
Creates the pill shape with rounded corners |
transition |
Adds smooth animation effects |
:hover |
Defines styles when user hovers over the button |
Example: Basic Animated Pill Button
The following example creates pill?shaped buttons with smooth hover animations
<!DOCTYPE html>
<html>
<head>
<style>
.pill-button {
background-color: #007bff;
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 5px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.pill-button:hover {
background-color: #0056b3;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.pill-button.secondary {
background-color: #6c757d;
}
.pill-button.secondary:hover {
background-color: #545b62;
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}
</style>
</head>
<body>
<h2>Animated Pill Buttons</h2>
<button class="pill-button">Primary Button</button>
<button class="pill-button secondary">Secondary Button</button>
</body>
</html>
Two pill-shaped buttons appear with rounded corners. On hover, they smoothly change color, scale up slightly, and display a subtle shadow effect.
Example: Advanced Animation Effects
This example demonstrates more sophisticated animation effects including gradient backgrounds and sliding animations
<!DOCTYPE html>
<html>
<head>
<style>
.advanced-pill {
background: linear-gradient(45deg, #ff6b6b, #ffd93d);
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight: bold;
margin: 15px;
border-radius: 30px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.advanced-pill::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ffd93d, #ff6b6b);
transition: left 0.4s ease;
z-index: -1;
}
.advanced-pill:hover::before {
left: 0;
}
.advanced-pill:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
</style>
</head>
<body>
<h2>Advanced Pill Animation</h2>
<button class="advanced-pill">Hover Me!</button>
</body>
</html>
A gradient pill button appears. On hover, it slides up slightly, displays a shadow, and the gradient colors animate with a sliding effect from left to right.
Best Practices
Use
border-radiusvalues that are at least half the button's height for a true pill shapeKeep transition durations between 0.2s and 0.5s for optimal user experience
Include
cursor: pointerto indicate interactivityTest animations across different browsers for compatibility
Conclusion
Animated pill?shaped buttons enhance user interface design with their modern appearance and smooth interactions. By combining border-radius, transition, and hover effects, you can create engaging buttons that improve the overall user experience while maintaining good performance.
2K+ Views
