A button is an interactive HTML element that performs an action when activated. Use a button for actions such as removing a cart item, sending a form, or opening a share menu; use a link for navigation. The browser supplies distinct behaviors, focus handling, and roles that assistive technologies use. section 8.2.2 section 11.5
Style buttons in layers:
- Add visible hover and focus states so interaction remains clear, especially for keyboard users. section 6.8
- Use purpose-based classes such as primary, secondary, and destructive rather than names tied to one page. section 8.2.2
A prominent form button
A submit button can be made more prominent by removing its border, rounding its corners, applying accent colors, setting a readable 1rem font size, and adding horizontal padding. Add space above its containing actions area to separate it from nearby fields. section 10.7
When several actions appear together, use flex layout and gap to space and center them. Shared styling can make links and buttons look consistent without replacing their semantic roles. section 6.8
