← Back to release summary

The `::interest-button` pseudo element

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

WPT details: https://wpt.fyi/results/html/semantics/interestfor?label=master&label=experimental&aligned&q=interestfor-pseudo

Summary

The `::interest-button` pseudo-element offers a way for developers to opt into a "button-like" pseudo-element that sits next to an interest invoker, primarily on touchscreen devices. Tapping the pseudo-element triggers the interest action on the originating element. While long-pressing can be used to activate interest invokers on touchscreens, the interaction is somewhat cumbersome - particularly for links, which often trigger a native context menu, and require another tap on an item in that context menu. The `::interest-button` solves this by providing an easy way for users to simply tap to show interest. {This feature is technically part of https://chromestatus.com/feature/4530756656562176, but I'm breaking it out here because it is scheduled to ship later.}

Motivation

The `::interest-button` pseudo solves the problem that showing interest on touchscreens (particularly on link `<a>` elements) is cumbersome. It is opt-in, because strong developer feedback told us that it isn't always appropriate to include an extra button to show interest, e.g. on constrained layouts or truly secondary information that isn't required for proper operation of the site.

Standards & signals

Ecosystem

Samples: https://jsbin.com/fizotey

Explainers: https://open-ui.org/components/interest-invokers.explainer

View on chromestatus.com