Breakout Buttons

Andy demonstrates a clever method for creating clickable card components using semantic HTML. The technique involves a button within a card, but the entire card acts as a clickable area. This is achieved by employing a pseudo-element that extends beyond the button's boundaries, covering the entire card. The drawback is slightly impaired text selection due to the pseudo-element overlaying the text. However, Andy argues this approach is superior to making the entire card an <a></a> element, as this would compromise semantics and potentially create significant issues for assistive technologies.

The same principle applies when using <a></a> links instead of buttons. However, in such cases, wrapping the entire area in the link is generally simpler, with the button-like portion styled using a <span></span> or similar element for visual consistency.

This technique addresses a common issue similar to nested links: a large linked block containing other independently linked areas. Nesting anchor links is problematic. Sara Soueidan's elegant solution involves placing an absolutely positioned "covering" link inside the card to encompass the entire clickable area, allowing other links within the card to be layered on top using z-index.

A codepen demonstrating Sara Soueidan's solution is available for reference.

The above is the detailed content of Breakout Buttons. For more information, please follow other related articles on the PHP Chinese website!