ButtonsLesson 108Free preview
Pill Buttons
This lesson is part of How To · All levels
Summary
A pill button is a button with a completely rounded tip that resembles a capsule. This effect is achieved with very large border-radius, for example 999px. The pill button is often used for tags, filters, and actions that want to look friendly.
Key points
- The very large boundary radii make the tip of the button completely round.
- The horizontal padding is wider giving space to the text.
- The pill style can be applied to buttons or anchors.
- The hover and focus-visible effects remain necessary for feedback.
- Make sure the button is high enough to make the click area convenient to use.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.