CSS Links

Learn how to style links with CSS including link states, hover effects, and creating attractive, accessible navigation.

Links are fundamental to the web. CSS provides powerful ways to style links for different states and create engaging user experiences.

Link Pseudo-Classes

Links have four main states:

/* Unvisited link */
a:link {
  color: #0066cc;
  text-decoration: none;
}

/* Visited link */
a:visited {
  color: #663399;
}

/* Mouse over link */
a:hover {
  color: #0099ff;
  text-decoration: underline;
}

/* Active/clicked link */
a:active {
  color: #ff3300;
}

Order Matters!

Always style link pseudo-classes in this order: LoVe HAte

:link
:visited
:hover
:active

This ensures proper cascading.

Basic Link Styling

a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

Removing Underlines

a {
  text-decoration: none;
}

/* Add back on hover */
a:hover {
  text-decoration: underline;
}

Animated Underlines

Slide In Underline

a {
  position: relative;
  text-decoration: none;
  color: #333;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

Underline from Center

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

Button-Style Links

.button-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.button-link:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-link:active {
  transform: translateY(0);
}

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #007bff;
}

.nav-link.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

External Link Indicators

a[href^="http"]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* Or with icon */
a[target="_blank"]::after {
  content: " 🔗";
  font-size: 0.8em;
}

Link with Icons

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: #007bff;
}

.icon-link:hover {
  color: #0056b3;
}

.icon-link svg {
  width: 1em;
  height: 1em;
  transition: transform 0.3s ease;
}

.icon-link:hover svg {
  transform: translateX(3px);
}

Card Links

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-link:hover .card-title {
  color: #007bff;
}

Download Links

a[download] {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

a[download]::before {
  content: "⬇";
}

a[download]:hover {
  background-color: #218838;
}

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #333;
  text-decoration: underline;
}

.breadcrumb a::after {
  content: "/";
  margin-left: 0.5rem;
  color: #ccc;
}

.breadcrumb a:last-child::after {
  content: none;
}

Link States with Background

a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

a:hover {
  background-color: #007bff;
  color: white;
}

a:visited {
  background-color: #e0e0e0;
}

a:active {
  transform: scale(0.95);
}

Focus States (Accessibility)

a:focus {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Custom focus style */
a:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default outline (only if custom provided!) */
a:focus:not(:focus-visible) {
  outline: none;
}

Link Within Text

.content a {
  color: #007bff;
  text-decoration: underline;
  text-decoration-color: rgba(0, 123, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}

.content a:hover {
  text-decoration-color: rgba(0, 123, 255, 1);
}

Disabled Links

a.disabled {
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
  opacity: 0.6;
}

Animated Hover Effects

Scale Effect

.scale-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.scale-link:hover {
  transform: scale(1.05);
}

Slide Effect

.slide-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.slide-link:hover {
  transform: translateX(5px);
}

Background Sweep

.sweep-link {
  position: relative;
  color: #333;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

.sweep-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  transition: left 0.3s ease;
  z-index: -1;
}

.sweep-link:hover {
  color: white;
}

.sweep-link:hover::before {
  left: 0;
}

Best Practices

Link Styling Best Practices

Always style link states in LVHA order
Make links visually distinct from regular text
Provide clear hover feedback
Include focus styles for keyboard navigation
Use sufficient color contrast (WCAG AA: 4.5:1)
Don't rely on color alone to indicate links
Keep link text descriptive ("Learn more" vs "Click here")
Ensure touch targets are at least 44x44px for mobile
Test with keyboard navigation
Consider visited link styling

Accessibility

Always provide focus indicators
Ensure links have descriptive text
Use aria-label for icon-only links
Maintain sufficient color contrast
Make clickable area large enough
Don't remove underlines without alternative styling
Test with keyboard only
Consider screen reader users

Common Patterns

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #007bff;
  transform: translateY(-3px);
}

CTA Link

.cta-link {
  display: inline-block;
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.cta-link:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  transform: translateY(-2px);
}

Well-styled links improve user experience and navigation - make them clear, accessible, and engaging!

Links are fundamental to the web. CSS provides powerful ways to style links for different states and create engaging user experiences.

Link Pseudo-Classes

Links have four main states:

/* Unvisited link */
a:link {
  color: #0066cc;
  text-decoration: none;
}

/* Visited link */
a:visited {
  color: #663399;
}

/* Mouse over link */
a:hover {
  color: #0099ff;
  text-decoration: underline;
}

/* Active/clicked link */
a:active {
  color: #ff3300;
}

Order Matters!

Always style link pseudo-classes in this order: LoVe HAte

:link
:visited
:hover
:active

This ensures proper cascading.

Basic Link Styling

a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

Removing Underlines

a {
  text-decoration: none;
}

/* Add back on hover */
a:hover {
  text-decoration: underline;
}

Animated Underlines

Slide In Underline

a {
  position: relative;
  text-decoration: none;
  color: #333;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

Underline from Center

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

Button-Style Links

.button-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.button-link:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-link:active {
  transform: translateY(0);
}

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #007bff;
}

.nav-link.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

External Link Indicators

a[href^="http"]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* Or with icon */
a[target="_blank"]::after {
  content: " 🔗";
  font-size: 0.8em;
}

Link with Icons

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: #007bff;
}

.icon-link:hover {
  color: #0056b3;
}

.icon-link svg {
  width: 1em;
  height: 1em;
  transition: transform 0.3s ease;
}

.icon-link:hover svg {
  transform: translateX(3px);
}

Card Links

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-link:hover .card-title {
  color: #007bff;
}

Download Links

a[download] {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

a[download]::before {
  content: "⬇";
}

a[download]:hover {
  background-color: #218838;
}

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #333;
  text-decoration: underline;
}

.breadcrumb a::after {
  content: "/";
  margin-left: 0.5rem;
  color: #ccc;
}

.breadcrumb a:last-child::after {
  content: none;
}

Link States with Background

a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

a:hover {
  background-color: #007bff;
  color: white;
}

a:visited {
  background-color: #e0e0e0;
}

a:active {
  transform: scale(0.95);
}

Focus States (Accessibility)

a:focus {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Custom focus style */
a:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default outline (only if custom provided!) */
a:focus:not(:focus-visible) {
  outline: none;
}

Link Within Text

.content a {
  color: #007bff;
  text-decoration: underline;
  text-decoration-color: rgba(0, 123, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}

.content a:hover {
  text-decoration-color: rgba(0, 123, 255, 1);
}

Disabled Links

a.disabled {
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
  opacity: 0.6;
}

Animated Hover Effects

Scale Effect

.scale-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.scale-link:hover {
  transform: scale(1.05);
}

Slide Effect

.slide-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.slide-link:hover {
  transform: translateX(5px);
}

Background Sweep

.sweep-link {
  position: relative;
  color: #333;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

.sweep-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  transition: left 0.3s ease;
  z-index: -1;
}

.sweep-link:hover {
  color: white;
}

.sweep-link:hover::before {
  left: 0;
}

Best Practices

Link Styling Best Practices

Always style link states in LVHA order
Make links visually distinct from regular text
Provide clear hover feedback
Include focus styles for keyboard navigation
Use sufficient color contrast (WCAG AA: 4.5:1)
Don't rely on color alone to indicate links
Keep link text descriptive ("Learn more" vs "Click here")
Ensure touch targets are at least 44x44px for mobile
Test with keyboard navigation
Consider visited link styling

Accessibility

Always provide focus indicators
Ensure links have descriptive text
Use aria-label for icon-only links
Maintain sufficient color contrast
Make clickable area large enough
Don't remove underlines without alternative styling
Test with keyboard only
Consider screen reader users

Common Patterns

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #007bff;
  transform: translateY(-3px);
}

CTA Link

.cta-link {
  display: inline-block;
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.cta-link:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  transform: translateY(-2px);
}

Well-styled links improve user experience and navigation - make them clear, accessible, and engaging!

CSS Links

On this page

CSS Links

On this page