Button Styling: Addressing the "Gotcha"

Gotcha: Using a `<div>` Styled as a Button (Incorrect)

Styling a `<div>` to look like a button (as shown below) is a common pitfall ("Gotcha"). While it might look like a button, it lacks crucial accessibility features:

I'm a styled div (Avoid this!)

This `<div>` lacks semantic meaning and accessibility. Users relying on keyboard navigation or screen readers will have a poor experience.

Correct Approach: Using Semantic Elements

Always use actual `<button>` elements for actions or `<a>` tags for navigation, styled as needed.

Correct `<button>` element:

This is keyboard focusable, announced correctly by screen readers, and semantically correct.

Correct `<a>` element styled as a button (for links):

Proper Link Button

This is also accessible and semantically correct for navigational purposes.