CSS Links

Learn how to style links with CSS to create beautiful, accessible, and interactive navigation elements

What is CSS Link Styling?

CSS link styling allows you to customize the appearance and behavior of hyperlinks on your web pages. Links have several states that can be styled individually, including default, visited, hover, active, and focus states. Well-styled links improve both the aesthetics and usability of your website.

Link States:

:link - Default, unvisited link
:visited - Links that have been visited
:hover - When the mouse is over the link
:active - While the link is being clicked
:focus - When the link has keyboard focus

Standard Link Button Link Animated Link

CSS Link Properties Reference

Property	Description	Common Values
color	Sets the text color of links	hex, rgb, rgba, color names
text-decoration	Controls the underline styling	none, underline, overline, line-through
background-color	Sets the background color	hex, rgb, rgba, color names, transparent
padding	Adds space inside button-style links	px, em, rem, %
border	Adds borders to links	width style color
border-radius	Rounds the corners of button-style links	px, em, rem, %
transition	Adds smooth transitions between states	property duration timing-function
outline	Adds focus indicators for accessibility	width style color, none
font-weight	Controls the boldness of link text	normal, bold, 100-900
display	Changes display behavior for button-style links	inline, block, inline-block, flex

CSS Link Styling in Action

Example Code

/* CSS Link Properties */

/* Default link styling */
a {
  color: #0066cc; /* Default link color */
  text-decoration: underline; /* Default underline */
}

/* Unvisited link */
a:link {
  color: #0066cc;
}

/* Visited link */
a:visited {
  color: #551a8b; /* Typically purple for visited links */
}

/* Mouse over link */
a:hover {
  color: #004499;
  text-decoration: none; /* Remove underline on hover */
}

/* Selected link (while being clicked) */
a:active {
  color: #cc0000;
}

/* Focused link (keyboard navigation) */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Link states with transitions */
a {
  transition: color 0.3s ease, background-color 0.3s ease;
}

a:hover {
  color: #004499;
  background-color: #f0f7ff;
}

/* Button-style links */
a.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

a.button:hover {
  background-color: #004499;
}

a.button:active {
  background-color: #003366;
}

/* Outline button-style links */
a.button-outline {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color: #0066cc;
  border: 2px solid #0066cc;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

a.button-outline:hover {
  background-color: #0066cc;
  color: white;
}

/* Removing default link styling */
a.no-style {
  color: inherit;
  text-decoration: none;
}

a.no-style:hover {
  color: inherit;
  text-decoration: underline;
}

/* Icon links */
a.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #0066cc;
}

a.icon-link:hover {
  color: #004499;
}

/* Link with arrow indicator */
a.arrow-link {
  position: relative;
  padding-right: 20px;
  text-decoration: none;
}

a.arrow-link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

a.arrow-link:hover::after {
  transform: translate(5px, -50%);
}

/* Underline animation effect */
a.underline-animation {
  position: relative;
  text-decoration: none;
}

a.underline-animation::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

a.underline-animation:hover::after {
  width: 100%;
}

/* Link with background highlight */
a.highlight {
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

a.highlight:hover {
  background-color: #f0f7ff;
}

/* Disabled link */
a.disabled {
  color: #999;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

/* External link indicator */
a[target="_blank"]::after {
  content: "↗";
  margin-left: 4px;
  font-size: 0.8em;
}

/* Print styles for links */
@media print {
  a {
    color: #000;
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    color: #666;
  }
}

/* Using CSS variables for link styling */
:root {
  --link-color: #0066cc;
  --link-visited-color: #551a8b;
  --link-hover-color: #004499;
  --link-active-color: #cc0000;
  --link-background-hover: #f0f7ff;
  --link-transition: all 0.3s ease;
}

a {
  color: var(--link-color);
  transition: var(--link-transition);
}

a:visited {
  color: var(--link-visited-color);
}

a:hover {
  color: var(--link-hover-color);
  background-color: var(--link-background-hover);
}

a:active {
  color: var(--link-active-color);
}