CSS Links · Styling, States, and Button-Style Links

Before we begin, let's make sure we understand three things you will need for this lesson.

What is a Link in HTML?

A link in HTML is created with the <a> tag (the "anchor" tag). It lets a visitor click to go somewhere else · another page, a section of the page, or a website.

<a href="https://www.example.com">Click here</a>

• <a> · opens the anchor tag
• href="..." · this attribute tells the browser WHERE to go when clicked. "href" stands for hypertext reference.
• Click here · this is the visible clickable text
• </a> · closes the anchor tag

Expected output in browser: The words "Click here" appear as blue underlined text. Clicking it takes you to example.com.

What is a CSS Selector?

A CSS selector tells the browser WHICH element to style. We already know:

a {
  color: red;
}

This makes ALL link text red. But links have states · different moments in their life (normal, hovered, clicked, visited). CSS lets you style each state separately using something called pseudo-classes.

What is a Pseudo-Class?

A pseudo-class is a special keyword added to a selector using a colon :. It targets an element only when it is in a specific condition or state.

Think of it like this: imagine a traffic light. It is always the same physical object, but its state changes · green, yellow, red. Pseudo-classes let you style an element differently depending on its "state" at any moment.

a:hover {
  color: orange;
}

This only applies color: orange when the user is hovering the mouse over the link · not at any other time.

What are Link States?

Every <a> tag (link) can exist in four different states depending on what the user has done:

Real-world analogy: Think of a library book. A "new" book is like an unvisited link. A book with your checkout stamp is like a visited link. Flipping through a book is like hovering. Signing your name to borrow it is like the active state.

Styling Unvisited Links · a:link

By default, browsers show unvisited links in blue with an underline. You can change this completely.

<!-- HTML -->
<a href="https://www.example.com">Go to Example</a>

/* CSS */
a:link {
  color: green;
  text-decoration: none;
}

Line by line:

• a:link · selects links that have not been visited yet
• color: green; · changes the text colour to green
• text-decoration: none; · removes the underline (the default underline on all links)

Expected output in browser: The link text "Go to Example" appears in green with no underline.

What happens if you remove text-decoration: none? The link will still have its default underline. Try it · this is how you understand the difference.

Styling Visited Links · a:visited

When a user has already clicked a link, the browser remembers it. By default, visited links turn purple. You can customise this too.

a:visited {
  color: darkred;
  text-decoration: none;
}

Line by line:

• a:visited · selects links the user has already clicked
• color: darkred; · shows the link in dark red to indicate it has been visited
• text-decoration: none; · keeps the underline removed

Expected output: After you click the link and come back, the link text becomes dark red.

Why does this matter? It helps users know which pages they have already visited, so they do not click the same links repeatedly. This improves the user experience.

Styling Hovered Links · a:hover

Hover is the most interactive state. When the user moves their mouse over a link, :hover applies immediately.

a:hover {
  color: hotpink;
  text-decoration: underline;
}

Line by line:

• a:hover · applies ONLY when the mouse is over the link
• color: hotpink; · changes the text to hotpink
• text-decoration: underline; · adds an underline back when hovering

Expected output: While the mouse is over the link, it turns hotpink with an underline. When the mouse moves away, it returns to its normal style.

Thinking prompt: What do you think happens if you also add background-color: yellow; to the hover rule? Try it!

Styling Active Links · a:active

The active state is the moment the user is physically pressing (clicking) the link · a very brief flash.

a:active {
  color: blue;
  font-weight: bold;
}

Line by line:

• a:active · applies only during the click (mouse button pressed down)
• color: blue; · flashes blue during the click
• font-weight: bold; · makes the text bold at the moment of clicking

Expected output: A brief flash of bold blue text the instant you click the link.

All Four States Together · Complete Example

Here is the standard pattern used on real websites · all four states styled together:

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Unvisited link */
    a:link {
      color: #0066cc;
      text-decoration: none;
    }

    /* Visited link */
    a:visited {
      color: #8b008b;
      text-decoration: none;
    }

    /* Hovered link */
    a:hover {
      color: #ff6600;
      text-decoration: underline;
    }

    /* Active (being clicked) link */
    a:active {
      color: #cc0000;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Visit Example Website</a></p>
  <p><a href="https://www.w3schools.com">Visit W3Schools</a></p>
</body>
</html>

Expected output:

• The two links start as #0066cc (medium blue), no underline
• After visiting one, it turns #8b008b (dark purple)
• When mouse hovers, it turns #ff6600 (orange) and underlines
• At the exact click moment, it flashes #cc0000 (red and bold)

Important rule: Always write these in this order: a:link, a:visited, a:hover, a:active. If you write them in the wrong order, some states may not work. This is because CSS reads rules from top to bottom, and later rules can overwrite earlier ones for the same element.

A helpful way to remember the order: LoVe HAte → Link, Visited, Hover, Active

Changing Text Decoration on Links

The text-decoration property is very commonly used on links. Here are all the values you can use:

a:link {
  text-decoration: none;       /* No underline */
}

a:hover {
  text-decoration: underline;  /* Underline */
}

Other values:

• text-decoration: overline; · line above text
• text-decoration: line-through; · strikethrough text

Example with all three decorations:

<style>
  .link-none    { text-decoration: none; }
  .link-over    { text-decoration: overline; }
  .link-through { text-decoration: line-through; }
  .link-under   { text-decoration: underline; }
</style>

<p><a href="#" class="link-none">No underline</a></p>
<p><a href="#" class="link-over">Overline</a></p>
<p><a href="#" class="link-through">Line-through</a></p>
<p><a href="#" class="link-under">Underline</a></p>

Tip: href="#" is a common trick in demos · it means "link to nowhere." It creates a valid link without navigating anywhere, so you can test styles.

Changing Background Colour on Links

Links are inline elements · they sit inside text. But you can still give them a background colour:

a:link {
  background-color: yellow;
}

a:hover {
  background-color: lightgreen;
}

Expected output: The link text has a yellow background normally, and switches to light green on hover.

This is useful for highlight-style links, or links inside a dark background.

Using Multiple Properties Together

You can combine as many properties as you want in each state. Here is a creative example:

a:link {
  color: white;
  background-color: navy;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
}

a:hover {
  color: navy;
  background-color: white;
  border: 1px solid navy;
}

Expected output: Links look like small navy-coloured tags. On hover, the colours invert · white becomes navy and navy becomes white. This is called a "colour inversion hover effect" and is very popular in web design.

So far, we have styled the text colour and decoration of links. But many websites use links that look like buttons · with a box, background colour, padding, rounded corners, and hover effects.

Why Would You Style a Link as a Button?

A <a> link is normally inline text. A <button> is a form element. But in navigation menus, call-to-action sections, and UI toolbars, designers want button-like visual appearance while still having normal link behaviour (clicking goes somewhere). The solution: style the <a> tag to look like a button using CSS.

Real-world example: The "Sign Up", "Learn More", and "Get Started" links on most websites are simply <a> tags styled to look like buttons.

Step 1 · Basic Link Button

Let's transform a plain link into a button step by step.

Start · plain link:

<a href="#">Click Me</a>

Add CSS to make it a button:

a {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

Line by line:

• display: inline-block; · normally, <a> is an "inline" element. Inline elements cannot have padding applied vertically. Changing it to inline-block allows us to add height, width, and padding in all directions, making it block-like while still flowing with text.
• background-color: #4CAF50; · gives the button a green background
• color: white; · makes the text white (for contrast against green)
• padding: 14px 25px; · adds space inside the button: 14px top/bottom, 25px left/right. This is what makes the button large enough to click comfortably.
• text-align: center; · centres the text horizontally inside the button
• text-decoration: none; · removes the underline
• font-size: 16px; · sets the text size

Expected output: A green rectangular button with white text "Click Me".

Step 2 · Add Hover Effect to the Button

Now let's make the button respond when the user hovers over it:

a:hover {
  background-color: #45a049;
  cursor: pointer;
}

Line by line:

• background-color: #45a049; · a slightly darker green appears on hover, giving visual feedback
• cursor: pointer; · changes the mouse cursor to the hand-pointer icon (even though <a> already does this by default, adding it explicitly ensures clarity)

Expected output: When the mouse is over the button, it darkens slightly. When the mouse moves away, it returns to the brighter green.

Design principle: Hover effects give the user feedback that the element is interactive. Without any visual change on hover, users may not know if they are hovering over a clickable element.

Step 3 · Full Styled Button with All States

Here is a complete, professional-looking button with all states properly handled:

<!DOCTYPE html>
<html>
<head>
  <style>
    a.button {
      display: inline-block;
      background-color: #008CBA;  /* Blue */
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      transition: background-color 0.3s ease;
    }

    a.button:hover {
      background-color: #005f7f;  /* Darker blue */
    }

    a.button:active {
      background-color: #003d52;  /* Even darker on click */
    }
  </style>
</head>
<body>

  <a href="#" class="button">Get Started</a>

</body>
</html>

Line by line · new things introduced:

• a.button · this selector targets only <a> tags that also have the class button. This is important: if you style ALL <a> tags as buttons, every text link on your page would look like a button. Using a class lets you choose which links become buttons.
• border-radius: 8px; · rounds the corners of the button, giving it a softer, modern look
• font-family: Arial, sans-serif; · ensures the button text uses Arial font
• transition: background-color 0.3s ease; · this creates a smooth colour change animation when hovering. Without this, the colour change is instant. With 0.3s, it fades over 0.3 seconds. ease means it starts and ends gently.

Expected output: A blue, rounded-corner button that smoothly fades to a darker blue on hover, then darker still when clicked.

Thinking prompt: What if you changed border-radius: 8px to border-radius: 50px? What shape would the button become?

Different Button Styles

Here are four common button style variations used in real websites:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Base button style for all */
    a.btn {
      display: inline-block;
      padding: 12px 28px;
      font-size: 15px;
      text-decoration: none;
      border-radius: 5px;
      margin: 8px;
      font-family: Arial, sans-serif;
      font-weight: bold;
    }

    /* Style 1: Solid Green */
    a.btn-green {
      background-color: #4CAF50;
      color: white;
    }

    a.btn-green:hover {
      background-color: #367a38;
    }

    /* Style 2: Solid Red */
    a.btn-red {
      background-color: #f44336;
      color: white;
    }

    a.btn-red:hover {
      background-color: #b71c1c;
    }

    /* Style 3: Outlined (Border Only, No Fill) */
    a.btn-outline {
      background-color: transparent;
      color: #4CAF50;
      border: 2px solid #4CAF50;
    }

    a.btn-outline:hover {
      background-color: #4CAF50;
      color: white;
    }

    /* Style 4: Grey / Disabled look */
    a.btn-grey {
      background-color: #9e9e9e;
      color: white;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

  <a href="#" class="btn btn-green">Confirm</a>
  <a href="#" class="btn btn-red">Delete</a>
  <a href="#" class="btn btn-outline">Subscribe</a>
  <a href="#" class="btn btn-grey">Disabled</a>

</body>
</html>

What is new here:

• Multiple classes on one element: class="btn btn-green" means the element gets styles from BOTH a.btn AND a.btn-green. The base a.btn handles shared properties like padding and font-size, while a.btn-green handles the specific colour.
• background-color: transparent; · on the outline button, the background is invisible. Only the border is visible. On hover, it fills in · this is the classic "outline button hover" technique used everywhere.
• cursor: not-allowed; · shows a "forbidden" cursor icon to visually indicate the grey button is disabled or inactive.

Expected output: Four buttons side by side: green solid, red solid, green outlined (fills on hover), and grey "disabled-looking".

Making a Full-Width Button

Sometimes you want a button that stretches across its container (like a "Submit" button in a form):

a.btn-fullwidth {
  display: block;          /* block takes the full width automatically */
  width: 100%;             /* optional: makes 100% of its parent container */
  background-color: #333;
  color: white;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  box-sizing: border-box;  /* ensures padding doesn't overflow the width */
}

display: block vs display: inline-block:

• inline-block · the button only takes as much width as its content + padding
• block · the button expands to fill the full width of its container

Adding a Border and Box Shadow

Professional-looking buttons often have a subtle border and shadow:

a.btn-premium {
  display: inline-block;
  background-color: #e7e7e7;
  color: black;
  padding: 12px 28px;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid #9e9e9e;        /* thin grey border */
  box-shadow: 2px 2px 5px #aaaaaa;  /* horizontal offset, vertical offset, blur, colour */
  border-radius: 4px;
}

a.btn-premium:hover {
  background-color: #d5d5d5;
  box-shadow: 3px 3px 8px #888888;  /* slightly larger shadow on hover */
}

box-shadow breakdown: box-shadow: 2px 2px 5px #aaaaaa;

• 2px · horizontal shadow offset (moves shadow 2px to the right)
• 2px · vertical shadow offset (moves shadow 2px downward)
• 5px · blur radius (how soft/blurry the shadow edge is)
• #aaaaaa · shadow colour (medium grey)

Expected output: A grey button with a visible soft shadow. On hover, the shadow grows slightly, making the button appear to "lift" slightly · a popular material design effect.

The W3Schools code challenges for CSS links test whether you can correctly apply the four link states, button styling, and hover effects. Let's work through the types of challenges you would encounter.

Challenge Type 1: Style a Specific Link State

Task: Make all unvisited links have the colour coral and remove the underline.

/* Solution */
a:link {
  color: coral;
  text-decoration: none;
}

Challenge Type 2: Add Hover Behaviour

Task: When hovering over a link, change its background colour to #f1f1f1.

/* Solution */
a:hover {
  background-color: #f1f1f1;
}

Challenge Type 3: Create a Button Link

Task: Style the link with class btn to look like a button: green background, white text, padding 10px 20px, no underline.

<a href="#" class="btn">Click Me</a>

/* Solution */
a.btn {
  display: inline-block;
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

Mistake 1: Wrong Order of Link Pseudo-Classes

Wrong:

a:hover { color: orange; }
a:link  { color: blue; }

Problem: CSS applies rules from top to bottom. a:link comes after a:hover, so it overrides the hover colour for unvisited links. The hover will never be orange for unvisited links.

Correct:

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: orange; }
a:active  { color: red; }

Always use the LVHA order.

Mistake 2: Forgetting display: inline-block on Button Links

Wrong:

a.button {
  padding: 20px 40px;   /* padding won't work correctly */
  background-color: green;
  color: white;
}

Problem: <a> is an inline element. Padding applied vertically to inline elements does not push other content away · it overlaps. The button will not have the correct height.

Correct:

a.button {
  display: inline-block;   /* REQUIRED for proper padding */
  padding: 20px 40px;
  background-color: green;
  color: white;
}

Mistake 3: Not Removing the Underline from Button Links

Wrong:

a.button {
  display: inline-block;
  background-color: purple;
  color: white;
  padding: 12px 24px;
  /* MISSING: text-decoration: none; */
}

Problem: The link will still show its default underline, which looks unprofessional on a button.

Correct:

a.button {
  display: inline-block;
  background-color: purple;
  color: white;
  padding: 12px 24px;
  text-decoration: none;   /* Remove the underline */
}

Mistake 4: Styling a Without a State and Expecting It to Override States

Wrong thinking: "I styled a { color: black; } but my visited links are still purple!"

Explanation: Browser default stylesheets include pseudo-class rules for a:visited and a:link. If you only write a { color: black; }, the browser's specific a:visited { color: purple; } rule can still win because it is more specific.

Correct: Always explicitly set ALL four states if you want complete control:

a:link    { color: black; }
a:visited { color: black; }
a:hover   { color: grey; }
a:active  { color: darkgrey; }

Mistake 5: Using :hover Before :link or :visited

/* Wrong Order */
a:hover   { color: red; }
a:link    { color: blue; }
a:visited { color: purple; }

The hover will be overridden by :link and :visited for links that have those states. The LVHA mnemonic saves you: Link → Visited → Hover → Active.