A quick look at different link design patterns on the Open Web and how to code them.

Go fullscreen: ⌃⌥F

Link patterns

Highlighting current page

Users should always be shown the currently highlighted page

HTML
<nav>
  <ul>
    <li><a href="#">Dinosaurs</a></li>
    <li><a href="#">Plesiosaurs</a></li>
    <li><a class="current" href="#">Pterosaurs</a></li>
    <li><a href="#">Insects</a></li>
  </ul>
</nav>
CSS
.current {
  background-color: #3c3670;
  border-color: #3c3670;
  color: #fff;
}

Button styles

Websites have many button patterns—but in every design they should look consistent

Share styles by using multiple CSS classes on a single element

HTML
<a class="btn" href="#">Main button</a>
<a class="btn btn-alt" href="#">Alternative style</a>
CSS
.btn {
  display: inline-block;
  padding: 0.4em 0.75em 0.3em;
  background-color: #333;
  border-radius: 8px;
  border: 0;
  color: #fff;
  text-decoration: none;
}
.btn-alt {
  background-color: #00675a;
}
  • Cards are boxes on screen with bits of information, images, links etc.
  • They usually sit in columns amongst other cards.

A link card is just a card that can be clicked anywhere.

Some different card examples from Facebook, Pinterest and Instagram
HTML
<a class="link-card" href="">
  <h2>Dinosaurs</h2>
  <p>Large and small prehistoric reptilian animals that dominated Earth.</p>
  <div class="btn-wrap">
    <span class="btn">Learn More!</span>
  </div>
</a>
CSS
.link-card:hover {
  background-color: #5e54af;
  border-color: #5e54af;
  color: #fff;
}
.link-card:hover .btn {
  background-color: #bbb6e3;
}

Videos & tutorials

Start

A quick look at different link design patterns on the Open Web and how to code them.