Currently Empty: ₹0.00
CSS Links
CSS CODES & EXAMPLES
CSS Links
Learn how to style HTML links using CSS. Create attractive navigation links, hover effects, button links, active states, visited links and professional website link designs.
01
What are CSS Links?
Style HTML anchor elements
Links are created in HTML using the
<a> element. CSS can change their color,
underline, background, border, spacing, hover behavior and many
other visual properties.
HTML:
<a href="#">Visit Website</a>
03
text-decoration
Control the underline
The text-decoration property controls decorations such
as underlines, overlines and line-through effects.
text-decoration.css
a {
text-decoration: none;
}
04
:link Pseudo-class
Style unvisited links
The :link pseudo-class targets links that have not yet
been visited by the user.
link-pseudo.css
a:link {
color: #1769d5;
}
05
:visited Pseudo-class
Style visited links
The :visited pseudo-class allows you to style a link
after the user has visited its destination.
visited-link.css
a:visited {
color: #7b4bb7;
}
06
:hover Pseudo-class
Change links when the mouse moves over them
hover-link.css
a:hover {
color: #0d4d99;
text-decoration: underline;
}
07
:active Pseudo-class
Style the link while it is being clicked
active-link.css
a:active {
color: #e63946;
}
08
Removing Link Underlines
Create clean modern links
remove-underline.css
a {
text-decoration: none;
}
09
Link Hover Effects
Create interactive links
hover-effects.css
a {
color: #1769d5;
text-decoration: none;
transition: .3s;
}
a:hover {
color: #0d4d99;
transform: translateY(-2px);
}
10
Button-Style Links
Turn an anchor into a CTA button
button-link.css
a {
display: inline-block;
padding: 12px 20px;
background: #1769d5;
color: #fff;
border-radius: 8px;
text-decoration: none;
}
a:hover {
background: #0d4d99;
}
11
Navigation Links
Create a professional navigation menu
navigation.css
nav a {
color: #172337;
padding: 10px 14px;
text-decoration: none;
}
nav a:hover {
color: #1769d5;
}
12
Animated Link Underline
Create a modern animated underline
animated-link.css
a {
position: relative;
color: #1769d5;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background: #1769d5;
transition: .3s;
}
a:hover::after {
width: 100%;
}
13
Link with Background
Use background colors for highlighted links
background-link.css
a {
display: inline-block;
padding: 10px 14px;
background: #eaf4ff;
color: #1769d5;
border-radius: 7px;
text-decoration: none;
}
14
Link Borders
Create outlined links
border-link.css
a {
display: inline-block;
padding: 10px 16px;
border: 1px solid #1769d5;
border-radius: 8px;
color: #1769d5;
text-decoration: none;
}
a:hover {
background: #1769d5;
color: #fff;
}
15
FEATURED COURSECard Links
Make complete cards clickableDiploma in Computer Application
Learn computer fundamentals, Microsoft Office, internet, digital services and practical computer skills.
View Course →
card-link.css
a.card {
display: block;
padding: 25px;
border-radius: 15px;
text-decoration: none;
color: #172337;
background: #f5f9fd;
}
a.card:hover {
transform: translateY(-4px);
}
16
Practical Website Examples
Where CSS links are commonly used
Website Navigation
Home, About, Courses, Contact and other primary pages.
Course Pages
Course details, enrollment and learning resources.
Student Portal
Login, registration, dashboard and results links.
Call-to-Action
Enroll Now, Apply Now and Get Started buttons.
Footer Links
Important pages, policies and support resources.
External Links
Social media, useful websites and external resources.
17
Best Practices
Build accessible and professional links
✓ Use clear link text
Use meaningful text such as “View Course” instead of vague text.
✓ Maintain contrast
Make sure links are easy to read against the background.
✓ Use hover feedback
Give users a clear visual indication when they hover over links.
✓ Keep navigation consistent
Use a consistent link style throughout the website.
18
CSS Link States
Remember the four important pseudo-classes:link
Unvisited link:visited
Visited link:hover
Mouse over link:active
Currently clicked link
Recommended order:
:link → :visited → :hover → :active
19
Live CSS Links Runner
Experiment with real CSS link examples
LIVE PREVIEW
20
Practice Task
Test your CSS Links skills🎯 Your Challenge
Create a professional navigation and course-link section using CSS.
- Create five navigation links.
- Remove the default underline.
- Add a custom hover color.
- Create an animated underline.
- Create an “Enroll Now” button-style link.
- Create a clickable course card.
21
Quick Reference
Important CSS link propertiescolor
Changes the link text color.text-decoration
Controls underline and other text decoration.:link
Targets unvisited links.:visited
Targets visited links.:hover
Styles a link when the pointer is over it.:active
Styles a link while it is being activated.transition
Creates smooth link animations.display
Useful for creating button-style links.