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 Links Working with CSS
CSS allows us to style links as desired. We can format text by adding colors, backgrounds, changing sizes, and even adding animations to create pleasant visual effects. Links can be styled using various pseudo-classes to define their appearance in different states.
Syntax
a {
property: value;
}
a:link { /* unvisited link */ }
a:visited { /* visited link */ }
a:hover { /* mouse over link */ }
a:active { /* selected link */ }
Pseudo-Class Order
For proper functionality, the order of pseudo selectors must be: :link, :visited, :hover, :active. This is often remembered as LVHA (Love Hate).
Example 1: Basic Link Styling with Hover Effects
The following example demonstrates basic link styling with hover animations −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
a {
text-decoration: none;
color: darkturquoise;
padding: 10px 15px;
border: 2px solid darkturquoise;
background-color: lemonchiffon;
border-radius: 5px;
transition: all 0.3s ease;
}
a:hover {
color: white;
background-color: slateblue;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transform: translateY(-2px);
}
a:active {
transform: translateY(0);
}
</style>
</head>
<body>
<p><a href="#">Hover over this styled link</a></p>
<p><a href="#">Another styled link</a></p>
</body>
</html>
Two styled links appear with turquoise text on light yellow backgrounds with borders. When hovering, they transform to white text on purple background with shadow and slight upward movement.
Example 2: Button-Style Links
This example shows how to create button-style links with different hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
.link-container {
margin: 30px;
display: flex;
gap: 20px;
align-items: center;
}
.btn-link {
padding: 12px 20px;
color: royalblue;
text-decoration: none;
background-color: #f0f8ff;
border: 2px solid royalblue;
border-radius: 25px;
transition: all 0.3s ease;
font-weight: bold;
}
.btn-link:hover {
color: white;
background-color: royalblue;
box-shadow: 0 4px 15px rgba(65, 105, 225, 0.4);
transform: scale(1.05);
}
.underline-link {
color: #333;
text-decoration: none;
padding: 8px 0;
position: relative;
}
.underline-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: royalblue;
transition: width 0.3s ease;
}
.underline-link:hover::after {
width: 100%;
}
</style>
</head>
<body>
<div class="link-container">
<a href="#" class="btn-link">Button Style</a>
<a href="#" class="underline-link">Animated Underline</a>
</div>
</body>
</html>
Two different styled links appear: a button-style link with rounded corners that scales and changes color on hover, and a text link that shows an animated underline effect when hovered.
Common Link States
| Pseudo-class | Description | When Applied |
|---|---|---|
:link |
Normal, unvisited link | Default state |
:visited |
Link that has been clicked | After visiting the URL |
:hover |
Link when mouse hovers over it | Mouse pointer over link |
:active |
Link at the moment it is clicked | While clicking |
Conclusion
CSS provides powerful tools for styling links through pseudo-classes and various properties. Remember to maintain the LVHA order for pseudo-classes and use transitions for smooth hover effects that enhance user experience.
269 Views
