20 Cool Hover effects Using CSS3 Transition

CSS3 has provided the designers a magic wand for which designers have always craved for. Now using CSS3 they can create such effects which were not possible without Flash few years back. In this tutorial I have created some link hover effects using CSS3 tansitions and CSS pseudu elements. The effects have been achieved using simple tricks combining the transitions and pseudo elements.

CSS3 Transition Effects

Live Demo Download Script

Sample Usage

.nav-1 a::after {
display: block;

.nav-1 a::after {
margin-top: 5px;
width: 0;
height: 4px;
background-color: #fff;
content: '';
opacity: 0;
-webkit-transition: width 0.3s, opacity 0.6s;
-moz-transition: width 0.3s, opacity 0.6s;
transition: width 0.3s, opacity 0.6s;

.nav-1 a:hover::after,
.nav-1 a:focus::after {
opacity: 1;
width: 100%;

<section class="color-1">
<nav class="nav-1">
<a href="#">Lorem</a>
<a href="#">Ipsum</a>
<a href="#">Consectetur</a>
<a href="#">Adipisicing</a>
<a href="#">Eiusmod</a>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

One thought on “20 Cool Hover effects Using CSS3 Transition

  1. Greate article. Keep posting such kind of info on your blog.
    Im really impressed by your site.
    Hi there, You’ve performed an excellent job.
    I’ll certainly digg it and for my part suggest to my
    friends. I’m confident they will be benefited from this site.

    my web site – Zombie diary Hack tool

Comments are closed.