Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
links

23 Articles
{
,

}
Direct link to the article Create a Tag Cloud with some Simple CSS and even Simpler JavaScript
blogging links

Create a Tag Cloud with some Simple CSS and even Simpler JavaScript

I’ve always liked tag clouds. I like the UX of seeing what tags are most popular on a website by seeing the relative font size of the tags, popular tags being bigger. They seem to have fallen out of fashion, …

Avatar of Mark Conroy
Mark Conroy on Dec 28, 2020
Direct link to the article Excluding Emojis From Transparent Text Clipping
emoji hover links

Excluding Emojis From Transparent Text Clipping

CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient.…

Avatar of Geoff Graham
Geoff Graham on Sep 2, 2020
Direct link to the article A CSS-only, animated, wrapping underline
links underlines

A CSS-only, animated, wrapping underline

Direct Link

Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, …

Avatar of Chris Coyier
Shared by Chris Coyier on Aug 21, 2020
Direct link to the article Block Links: The Search for a Perfect Solution
accessibility links ux

Block Links: The Search for a Perfect Solution

I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. …

Avatar of Vikas Parashar
Vikas Parashar on May 25, 2020 (Updated on May 27, 2020)
Direct link to the article The Contrast Triangle
accessibility high-contrast links text underlines

The Contrast Triangle

Direct Link

Chip Cullen:

Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make

…
Avatar of Chris Coyier
Shared by Chris Coyier on Apr 20, 2020
Direct link to the article How to Create a “Skip to Content” Link
:focus-within accessibility hiding links

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 …

Avatar of Paul Ryan
Paul Ryan on Mar 17, 2020
Direct link to the article Block Links Are a Pain (and Maybe Just a Bad Idea)
accessibility links

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 …

Avatar of Chris Coyier
Chris Coyier on Mar 10, 2020 (Updated on Mar 11, 2020)
Direct link to the article Use a:visited in your CSS stylesheet
links

Use a:visited in your CSS stylesheet

Direct Link

Evert Pot:

Unfortunately, when setting a new color (e.g. a { color: #44F }) the ‘purple visited link’ feature also gets disabled. I think this is a shame, as there’s so many instances where you’re going through a list

…
Avatar of Chris Coyier
Shared by Chris Coyier on Mar 9, 2020
animation hover links

4 Ways to Animate the Color of a Text Link on Hover

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.…

Avatar of Katherine Kato
Katherine Kato on Mar 3, 2020
Direct link to the article Fixed Headers and Jump Links? The Solution is scroll-margin-top
headers links scroll-margin scroll-padding

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 …

Avatar of Chris Coyier
Chris Coyier on Feb 21, 2020
Direct link to the article A Complete Guide to Links and Buttons
buttons links

A Complete Guide to Links and Buttons

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

Avatar of Chris Coyier
Chris Coyier on Feb 14, 2020 (Updated on Oct 21, 2020)
  • 1
  • 2
  • 3
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top