Codecademy Logo

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 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:

  • Normal (not clicked)
  • Hover
  • Active (clicked)
  • Visited

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.

0