In the field of user interface design, signifiers are indicators that offer clues about how to interact with new objects or situations.
The user agent stylesheet is a set of default styles included in the browser for use on all web pages.
Links and buttons should exhibit the same behavior across different browsers to consistently maintain the same experience for all users.
In a browser, links have four main states:
Links should be styled in a different way from their surrounding text.
By default, links appear blue and underlined in contrast to the surrounding black text.
Anchor text is the text inside of a link and is descriptive of the linked resource.
It improves:
The title attribute can be provided to any HTML element.
This attribute is used for additional context or advisory text for clickable elements.
A tooltip is a descriptive box which contains the text of an element’s title attribute and appears near the user’s cursor.
:hover CSS Pseudo-ClassThe CSS pseudo-class :hover is used to style an element when the mouse cursor hovers over it.
cursor PropertyThe CSS cursor property is used to change the appearance of the mouse cursor when hovering over an element.
Skeuomorphism is the concept of replicating or imitating real-life counterparts with UI elements.
Flat design uses simplicity and lack of clutter for its UI elements.
A <button> element can incorporate skeuomorphic styling for a realistic 3D appearance.
When pressing the button, a texture change may occur to make the button appear to flatten and pop back up when released.
A <button> element can incorporate flat styling for a simple 2D effect.
When pressing the button, a color change may occur as a signifier that the button has been pressed.
A button can have a hover state that changes the appearance of a cursor when it is directly over the button.
The hover state of buttons and links do not apply to mobile devices due to the lack of a cursor.