Hello readers , Today's in my blog I have created a Creative Link with hover effect using CSS3 transition ,transform and translate property and have also made the use of pseudo-elements before and after.
In my blog I have tried to create 2 types of links showing a different effect whenever we over the link items.
Now for creating the first section of the creative link , I need to create a nav with the id as “cl-effect” following the same name for the class.
The above section has nested anchor tags containing a list of links within it inside the nav tag.
To the first section links , I have styled it with the border-top but on hover event the top border will slide down long with the left border with the help of pseudo-elements before and after .
Below is the code for the first section code :-
<section class="menu-list">
<nav id="cl-effect" class="cl-effect">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Settings</a>
<a href="#">Event</a>
</nav>
</section>
Below is the CSS code for the first section :-
cl-effect a::before{
background: #fff none repeat scroll 0 0;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
transition: top 0.3s ease 0s;
width: 100%;
}
.cl-effect a::after{
background: #fff none repeat scroll 0 0;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
transition: height 0.3s ease 0s;
width: 2px;
}
cl-effect a::before{
background: #fff none repeat scroll 0 0;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
transition: top 0.3s ease 0s;
width: 100%;
}
.cl-effect a::after{
background: #fff none repeat scroll 0 0;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
transition: height 0.3s ease 0s;
width: 2px;
}
.cl-effect a {
margin: 0 10px;
padding: 10px 20px;
text-decoration: none;
}
.cl-effect a:hover::before{
opacity: 1;
top: 100%;
}
.cl-effect a:hover::after {
height: 100%;
}
.cl-effect a {
margin: 0 10px;
padding: 10px 20px;
text-decoration: none;
}
.cl-effect a:hover::before{
opacity: 1;
top: 100%;
}
.cl-effect a:hover::after {
height: 100%;
}
To the above section area ,I have styled it at the hover effect using the pseudo-elements before and after by specifying the height , opacity and its position to top.
Now moving over to the next section area , where I have created an another section of creative links for creating it again I have to make a nav tag with a nested anchor tag items in it.
Now to the link items there is a border which is align right and left to the item displayed.
Below is the HTML code for the next section code :-
<section class="menu">
<nav id="cl-effect-01" class="cl-effect-01">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Settings</a>
<a href="#">Event</a>
</nav>
</section>
Below is the CSS code :-
.menu{
background: #435a6b none repeat scroll 0 0;
}
.cl-effect-01 a::before {
left: 0;
top: 0;
transform: rotate(90deg);
transform-origin: 0 0 0;
}
.cl-effect-01 a::before, .cl-effect-01 a::after {
background: #fff none repeat scroll 0 0;
content: "";
height: 2px;
opacity: 0.2;
pointer-events: none;
position: absolute;
transition: all 0.3s ease 0s;
width: 45px;
}
.cl-effect-01 a::after {
bottom: 0;
right: 0;
transform: rotate(90deg);
transform-origin: 100% 0 0;
}
.cl-effect-01 a {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.cl-effect-01 a:hover::before,
.cl-effect-01 a:hover::after,
.cl-effect-01 a:focus::before,
.cl-effect-01 a:focus::after {
opacity: 1;
}
.cl-effect-01 a:hover::before,
.cl-effect-01 a:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
.cl-effect-01 a:hover::after,
.cl-effect-01 a:focus::after {
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%);
-moz-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}
In the CSS code , I have applied transform rotate property at the hover effect such that the border that are align left and right to the items will rotate and will be placed at the top and at the bottom of the item.
I have also used pseudo-elements before and after for styling the link items .
I have also applied transition and translate property to the list items at the hover effect.
Conclusion:-
Hence, I have created a creative link with hover effect using CSS and pseudo-elements which was easy to learn and understand.
Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)