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
How to create pill buttons with CSS?
The pill buttons mean pill-shaped buttons. We can easily style and shape the default button to form a pill button. Set the border-radius on the button to shape it like a pill button. You can also remove the border using the border property with the value none. Align the button text in the center using the text-align property with the value center.
Create buttons
First, create buttons using the <button> element −
<button>Button 1</button> <button>Button 2</button> <div></div> <button>Button 3</button> <button>Button 4</button>
Reshape the button to pill button
The button we created above will be converted to a pill button using the following CSS styles. The key one is the border-radius property. The text in the button is placed in the center using the text-align property −
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(193, 255, 236);
border: none;
color: rgb(0, 0, 0);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
font-size: 30px;
border-radius: 32px;
}
Add rounded corners
Above, we have set the rounded corners of the buttons to form it like pill buttons. This is achieved using the border-radius property −
border-radius: 32px;
Button text
The text is placed in the center of the pill button −
text-align: center;
Example
The following is the code to create pill buttons −
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(193, 255, 236);
border: none;
color: rgb(0, 0, 0);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
font-size: 30px;
border-radius: 32px;
}
button:hover {
background-color: #9affe1;
}
</style>
</head>
<body>
<h1>Pill Buttons Example</h1>
<button>Button 1</button>
<button>Button 2</button>
<div></div>
<button>Button 3</button>
<button>Button 4</button>
</body>
</html>
3K+ Views
