Learn Links and Buttons
Lesson 1 of 1
  1. 1
    Imagine that you are a user who has arrived at the website loaded in the web browser here. What can you interact with, what can you click on to navigate the site? Before clicking anything, scroll t…
  2. 2
    Web browsers have always taken account of the importance of using signifiers for navigation. By default, browsers include a user agent stylesheet, a set of default styles included with the browse…
  3. 3
    The most important aspect of styling links is differentiating links from surrounding text. The default blue-text, underlined link style accomplishes this differentiation using two CSS properties: c…
  4. 4
    In addition to providing descriptive anchor text, it is sometimes helpful to provide additional context to explain links. This context can be particularly helpful when a link contains or consists …
  5. 5
    In addition to styling elements themselves, other signifiers and visual feedback can be utilized during user interaction. The CSS pseudo-class :hover can be used to style elements on mouse hover…
  6. 6
    Links have four main states: normal (not clicked), hover, active (clicked), and visited. These four states have associated CSS pseudo-classes : :link, :hover, :active, and :visited. These four sta…
  7. 7
    Buttons are another fundamental element of user interaction and navigation. They are called ‘buttons’ because they are often modeled on the appearance and behavior of real-life buttons. The concep…
  8. 8
    Skeuomorphic button design aims to imitate the appearance and interactivity of a real-life button, often including a ‘raised’ appearance while the button is unpressed and a ‘pressed’ appearance wh…
  9. 9
    Flat design is so-called because of its 2-D appearance. Elements appear flat on the screen, and designers must rely on other styling and signifiers to indicate clickability. Flat design buttons c…
  10. 10
    Just as with links, buttons should make use of hover states and the cursor: pointer declaration. All the caveats about the shortcomings of hover states on mobile devices apply to buttons, but thei…
  11. 11
    Great work! You’ve made this survey site much easier to understand and interact with! Let’s review what changes you made to improve usability: 1. Added styles to make links recognizable and distin…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo