Learn Links and Buttons
Learn best practices and implementations for demonstrating interaction and interactivity to your website's visitors.
Start
Learn Links and Buttons
Lesson 1 of 1
- 1Imagine 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…
- 2Web 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…
- 3The 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…
- 4In 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 …
- 5In 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…
- 6Links 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…
- 7Buttons 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…
- 8Skeuomorphic 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…
- 9Flat 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…
- 10Just 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory