Styling Links and Buttons

Links (<a> tags) and buttons (<button> tags) are fundamental interactive elements on any webpage. Mastering their styling allows you to create intuitive and visually appealing user interfaces.

Styling Link States

a:link {
  color: #007bff; /* Unvisited link */
  text-decoration: none;
}

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

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

a:active {
  color: #004085; /* Link is clicked */
}
→
Links change appearance based on user interaction:
- Initial state (:link)
- After being visited (:visited)
- When hovered over (:hover)
- While being clicked (:active)

Use these pseudo-classes to provide visual feedback for users interacting with links.

Basic Button Styling

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
→
Transforms plain buttons into visually appealing, clickable elements with:
- Custom background and text color
- Pleasant padding and rounded corners
- A clear indicator (cursor: pointer) that it's interactive

Buttons have default browser styles; it's common to reset them and apply your own.

Button Interaction States

button:hover {
  background-color: #218838;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

button:active {
  background-color: #1e7e34;
  transform: translateY(2px);
}
→
Enhances user experience by providing visual feedback when:
- The mouse is over the button (:hover)
- The button is actively being pressed (:active)

Similar to links, buttons also benefit from `:hover` and `:active` states for better interactivity.

Resetting Default Styles

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

button {
  all: unset; /* Resets all properties */
  /* Then apply custom styles */
}
→
Eliminates browser-specific default styling to ensure consistent appearance across different browsers, giving you full control over the element's look.

Browsers apply default styles that might interfere with your design. Resetting them gives you a clean slate.

Practical Use: Navigation Bar

nav {
  background-color: #f8f9fa;
  padding: 10px 0;
  text-align: center;
}

.nav-link {
  display: inline-block;
  color: #333;
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: #e2e6ea;
  color: #007bff;
}
→
A clean and interactive navigation bar with:
- Stylish links that behave like buttons
- Smooth hover transitions for better user feedback

Common Styling Mistakes

/* Forgetting link state order (L-V-H-A) */
/* Correct order is :link, :visited, :hover, :active */

/* Using display: inline for buttons */
button { display: inline; /* Makes padding/margin difficult */ }

/* Not changing cursor for buttons/links */
button { cursor: default; /* Should be pointer */ }

Always consider the order of link states and use appropriate display properties for buttons.

Your Task: Interactive Elements

Apply CSS to style the links and buttons in the provided HTML:

  1. Set the base style for all links to remove the underline (text-decoration: none;) and set their color to #007bff.
  2. Style :visited links to have a color of #6610f2.
  3. On :hover, change the link's color to #0056b3 and add text-decoration: underline;.
  4. When a link is :active, set its color to #004085.
  5. Style all <button> elements with a background-color of #28a745, color: white, padding: 10px 20px, border: none, and border-radius: 5px. Also set cursor: pointer.
  6. On <button> :hover, change the background-color to #218838 and add a subtle box-shadow: 0 4px 8px rgba(0,0,0,0.2);.
  7. When a <button> is :active, set its background-color to #1e7e34 and apply a transform: translateY(2px); for a pressed effect.
  8. Style the .nav-link class to be display: inline-block, have padding: 8px 15px, and a transition: background-color 0.3s ease;.

Tip: Pay attention to the order of link pseudo-classes (L-V-H-A: Link, Visited, Hover, Active) for correct cascade behavior.

Section 1/7Styling Link States

Styling Link States

Use these pseudo-classes to provide visual feedback for users interacting with links.

Styling Links and Buttons

Links (<a> tags) and buttons (<button> tags) are fundamental interactive elements on any webpage. Mastering their styling allows you to create intuitive and visually appealing user interfaces.

Styling Link States

a:link {
  color: #007bff; /* Unvisited link */
  text-decoration: none;
}

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

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

a:active {
  color: #004085; /* Link is clicked */
}
→
Links change appearance based on user interaction:
- Initial state (:link)
- After being visited (:visited)
- When hovered over (:hover)
- While being clicked (:active)

Use these pseudo-classes to provide visual feedback for users interacting with links.

Preview