Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Styling different states of a link using CSS
Using CSS pseudo-classes, namely :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors should be: :link, :visited, :hover, :active.
Syntax
a:pseudo-selector {
/* CSS properties */
}
Link Pseudo-Classes
The following are the key pseudo-classes for styling links −
:link− To select unvisited links:visited− To select all visited links:hover− To select links on mouse over:active− To select the active link (when clicked)
Example: Basic Link States
The following example demonstrates styling different states of a link using pseudo-classes −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
}
a {
font-size: 18px;
margin: 10px;
display: inline-block;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: orange;
text-decoration: underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div class="container">
<a href="https://tutorialspoint.com">Visit TutorialsPoint</a>
<br>
<a href="#">Sample Link</a>
</div>
</body>
</html>
Two links appear: "Visit TutorialsPoint" and "Sample Link". Initially navy colored (unvisited), they change to purple when visited, orange when hovered over with underline, and red when actively clicked.
Example: Enhanced Link States with Box Shadow
The following example shows advanced styling with box shadows and size changes on hover and active states −
<!DOCTYPE html>
<html>
<head>
<style>
.button-container {
padding: 30px;
text-align: center;
}
.styled-link {
display: inline-block;
margin: 15px;
padding: 12px 24px;
border: 2px solid #333;
text-decoration: none;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
transition: all 0.3s ease;
}
.styled-link:link {
color: #333;
background-color: #f0f0f0;
}
.styled-link:visited {
color: #6a1b9a;
}
.styled-link:hover {
color: #ff9800;
background-color: #fff3e0;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.styled-link:active {
color: #d32f2f;
background-color: #ffebee;
box-shadow: inset 0 4px 8px rgba(211, 47, 47, 0.3);
transform: scale(0.95);
}
</style>
</head>
<body>
<div class="button-container">
<a href="#" class="styled-link">Hover Me!</a>
<a href="https://example.com" class="styled-link">Click Me!</a>
</div>
</body>
</html>
Two styled button-like links appear with borders and padding. On hover, they scale up 110% with orange color and shadow. When clicked, they scale down to 95% with red color and inset shadow effect.
Conclusion
CSS pseudo-classes provide powerful ways to style different link states. Remember the correct order: :link, :visited, :hover, :active for proper functionality. These states help create interactive and user-friendly navigation elements.
324 Views
