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 .
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.
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.