Learn Links and Buttons
Signifiers
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
The user agent stylesheet is a set of default styles included in the browser for use on all web pages.
Links and Button Behavior
Links and buttons should exhibit the same behavior across different browsers to consistently maintain the same experience for all users.
Link States
In a browser, links have four main states:
- Normal (not clicked)
- Hover
- Active (clicked)
- Visited
Link Styles
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
Anchor text is the text inside of a link and is descriptive of the linked resource.
It improves:
- Usability
- Accessibility
- Search engine optimization
The ‘title’ Attribute
The title attribute can be provided to any HTML element.
This attribute is used for additional context or advisory text for clickable elements.
Tooltips
A tooltip is a descriptive box which contains the text of an element’s title attribute and appears near the user’s cursor.
The :hover CSS Pseudo-Class
The CSS pseudo-class :hover is used to style an element when the mouse cursor hovers over it.
The CSS cursor Property
The CSS cursor property is used to change the appearance of the mouse cursor when hovering over an element.
Skeuomorphism
Skeuomorphism is the concept of replicating or imitating real-life counterparts with UI elements.
Flat Design
Flat design uses simplicity and lack of clutter for its UI elements.
Button Skeuomorphic Styling
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.
Button Flat Styling
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.
Button Hover State
A button can have a hover state that changes the appearance of a cursor when it is directly over the button.
Mobile Device Hover State
The hover state of buttons and links do not apply to mobile devices due to the lack of a cursor.
