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>
.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>
.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;
}
Link cards
- 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.
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>
.link-card {
display: block;
}
.link-card:hover {
background-color: #5e54af;
border-color: #5e54af;
color: #fff;
}
.link-card:hover .btn {
background-color: #bbb6e3;
}