Loading Please Wait...
The links are one of the main element for user interactions. User can click on it and redirect to the desired page.
When styling links, it's important to understand how to make use of pseudo-classes to style their states effectively. It's also important to know how to style links for use in common interface features whose content varies, such as navigation menus and tabs.
The first thing to understand is the concept of link states — different states that links can exist in. These can be styled using different pseudo-classes
Link: A link that has a destination (normal unvisited), styled using the :link pseudo class.
Visited: A link that has already been visited (exists in the browser's history), styled using the :visited pseudo class.
Hover: A link that is hovered over by a user's mouse pointer, styled using the :hover pseudo class.
Focus: A link that is focused (e.g., moved to by a keyboard user using the Tab key or something similar) — this is styled using the :focus pseudo class.
Active: A link that is activated (e.g., clicked on), styled using the :active pseudo class.
/* apply style to all link tag and link state */
a {
color: #dea42a;
outline: none;
}
/* unvisited link */
a:link {
color: #6900ff;
}
/* visited link */
a:visited {
color: #a5c300;
}
/* focused link */
a:focus {
text-decoration: none;
background: #bae498;
}
/* hover link */
a:hover {
text-decoration: none;
background: #cdfeaa;
}
/* active link */
a:active {
background: #6900ff;
color: #cdfeaa;
}
<!DOCTYPE html>
<html>
<head>
<style>
div{
display: flex;
gap: 20px;
}
.customBtn{
border: 2px solid black;
background-color: transparent;
color: black;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-color: #4836dd;
color: #4836dd;
text-decoration: none;
transition: all 0.25s ease-in-out;
border-radius: 8px;
}
.customBtn:hover {
background-color: #4836dd;
color: white;
}
.customBtn:focus, .customBtn.focus{
box-shadow: 0 0 0 5px rgba(72, 54, 221, 0.2);
border-color: #4836dd;
}
.customBtn:active, .customBtn.active{
background-color: #3a2bb1;
border-color: #3a2bb1;
color: white;
}
.customBtn.disabled{
background-color: #a49bee;
border-color: #9186eb;
color: #6d5ee4;
user-select: none;
cursor: not-allowed;
pointer-events: none;
}
</style>
</head>
<body>
<div>
<a href="#" class="customBtn">Normal</a>
<a href="#" class="customBtn active">Active</a>
<a href="#" class="customBtn focus">Focus</a>
<a href="#" class="customBtn disabled">Disabled</a>
</div>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved