Skip to main content
CSS is fun and cool and I like it.
Article

How to Create a “Skip to Content” Link

Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

In fact, you can find one right here on CSS-Tricks if you crack DevTools open.… Read article “How to Create a “Skip to Content” Link”

Article

Block Links Are a Pain (and Maybe Just a Bad Idea)

As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target. … Read article “Block Links Are a Pain (and Maybe Just a Bad Idea)”

Link

Use a:visited in your CSS stylesheet

Article

Fixed Headers and Jump Links? The Solution is scroll-margin-top

The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That’s totally fine, until you have a position: fixed; header at the top of the page obscuring the header you’re trying to link to!

Fixed headers have a nasty habit of hiding the element you’re trying to link to. … Read article “Fixed Headers and Jump Links? The Solution is scroll-margin-top”

Article

A Complete Guide to Links and Buttons

Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

Article

Breakout Buttons

Andy covers a technique where a semantic <button></button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a bit. I believe this is better than making the whole dang area a <button></button> because that would sacrifice semantics and likely cause extreme weirdness for … Read article “Breakout Buttons”

Article

The Many Ways to Link Up Shapes and Images with HTML and CSS

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Or you have an interactive image that responds differently when different regions of it are clicked.

You can surround … Read article “The Many Ways to Link Up Shapes and Images with HTML and CSS”

Article

Link Underlines That Animate Into Block Backgrounds

It’s a cool little effect. The default link style has an underline (which is a good idea) and then on :hover you see the underline essentially thicken up turning into almost what it would have looked liked if you used a background-color on the link instead.

Here’s an example of the effect on the Superfriendly site:… Read article “Link Underlines That Animate Into Block Backgrounds”

Article

Styling Links with Real Underlines

Before we come to how to style underlines, we should answer the question: should we underline?

In graphic design, underlines are generally seen as unsophisticated. There are nicer ways to draw emphasis, to establish hierarchy, and to demarcate titles.

That’s clear in this advice from Butterick’s “Practical Typography”:

If you feel the urge to underline, use bold or italic instead. In special situations, like headings, you can also consider using all caps, small caps, or changing the point

Read article “Styling Links with Real Underlines”