How TO - Pill Buttons
Learn how to create pill buttons with CSS.
How To Create a Pill Button
Step 1) Add HTML:
Example
<button class="button">Pill Button</button>
Step 2) Add CSS:
Add rounded corners to a button with the border-radius property:
Example
.button {
background-color: #ddd;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px
2px;
cursor: pointer;
border-radius: 16px;
}
Try it Yourself »
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
