css link hover effects code example
Example 1: cool hover effects css
.i {
color: #fff;
font-size: 35px;
margin: 15px 15px 0 15px;
transition: 0.2s;
transition-property: color, transform;
}
i:hover {
color: #FF5733;
transform: scale(1.3);
}
Example 2: css a href hover effect
body{
background-color: #000;
}
.container{
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
}
li{
list-style: none;
display: inline-block;
}
a{
text-decoration: none;
color:#fff;
font-size: 24px;
padding: 0 20px;
display: inline-block;
}
.link::after{
content: '';
display: block;
width: 0;
height: 2px;
transition: width .3s;
background-color: #fff;
}
.link:hover::after{
width: 100%;
transition: width .3s;
}
<div class="container">
<li><a href="#" class="link">Home</a></li>
<li><a href="#" class="link">About Us</a></li>
<li><a href="#" class="link">Services</a></li>
<li><a href="#" class="link">Gallery</a></li>
<li><a href="#" class="link">Contact</a></li>
</div>