Simple Shadow-Beneath Buttons

Simple buttons with shadow beneath.

A11y requirements: 48px min size and focus. Also avoid disabled attribute (use aria-disabled), but it must still be allowed, e.g., for pagination. (CSS-tricks.com/making-disabled-buttons-more-inclusive) (Some alternative solutions.)

---

Regular and primary:

Regular button Primary button Regular disabled Primary disabled

More lines:

Regular button with
line break

With rounded corners:

Regular button Primary button Regular disabled Primary disabled

Any HSL’s hue and saturation:

Regular button Regular button Regular button Regular button

Regular button Regular button Regular button Regular button

Pill-shape and reduce shadow:

Regular button Regular button Regular button Regular button

Big buttons

Regular button Primary button

Regular button Primary button