Button Reference

  1. Button - Design Patterns and Widgets

  2. Create Button - Example


Aria-Label Button




Aria-Labelledby Button

The aria-labelledby attribute establishes relationships between objects and their label(s)




Aria-Disabled Button




Default-Disabled Button




Aria-Pressed Button (Non - Semantic Element)

Aria-Pressed


Aria-hasPopup & Aria-expanded Button




Aria-Selected & Aria-controls Button

Content for the first panel




Touchstart Event




Normal button with :hover CSS without using anything specific for mobiles




Button with specific :active CSS rule for mobiles




Aria-hidden Example

This is not hidden !




Attribute List

  1. role
  2. aria-label
  3. aria-labelledby
  4. aria-disabled
  5. aria-pressed
  6. aria-haspopup (using popup)
  7. aria-expanded (using popup)
  8. aria-selected="true" (using Tab Role)
  9. aria-controls (using Tab Role)