Published date and last update:

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:

More lines:

With rounded corners:

Any HSL’s hue and saturation:

Pill-shape and reduce shadow:

Big buttons