How TO - Pill Buttons

❮ Previous Next ❯

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.

❮ Previous Next ❯