Create Cool CSS Link Hover Effects | Creative Link Effects

Create Cool CSS Link Hover Effects | Creative Link Effects

In this short tutorial, we’d like to share how you can create creative and cool hover effects for links with pure CSS only. You can apply these effect on your site navigation bar.

The idea to create simple menus bar and then animate them by using modern effect. In the example, We are using hover transitions, but you could also add these effects on click or as an initial animation.

With CSS3 we will transform boring HTML menus into the good-looking navigation menu.

We are going to provide you three different styles and you can choose which you most like. It is easy to implement because it is built with standard hyperlinks links. We also added three different color schemes.

Please note that pseudo-element transitions might don’t work in each browser. Best viewed in Chrome and Firefox.

The navigation is the list of links and it needs standard HTML as a base. In our examples, we will build the CSS3 Menu from a standard HTML list. In most cases the HTML is simply a nav with some links:

The Markup

Lets first define a section which is added just for adding the background color to make the navigation hover effect look more awesome.

Next, We have defined the nav element and than we simply added the hyperlinks.

<section class="color-red">
    <nav class="creativenav_SF">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Products</a>
        <a href="#">Sigup</a>
    </nav>
</section>

But for 3D effects we might use a data-title attribute in a span for repeating the link text in the pseudo-element:

<section class="color-pink">
    <nav class="creativenav_3D">
        <ul>
            <li><a href="#"><span data-title="silent">silent</span></a></li>
            <li><a href="#"><span data-title="Efficiency">Efficiency</span></a></li>
            <li><a href="#"><span data-title="travel">travel</span></a></li>
            <li><a href="#"><span data-title="agency">agency</span></a></li>
            <li><a href="#"><span data-title="online">online</span></a></li>
        </ul>
    </nav>
</section>

An example of the effect of creative navigation is the following style. First of all, we need to style the links by adding font-size, padding and color, etc and than on-hover, we added the background color.

/* Effect 1: Bottom Line*/
.creativenav_SF a {
	font-size: 18px;
	padding: 20px 50px;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
.creativenav_SF a:hover,
.creativenav_SF a:focus {
	outline: none;
	background:#b82e20;
}

Next, We will positions a pseudo-element ::after and add it’s position: absolute; plus we added a transition for animations and scaling the element.

.creativenav_SF a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}
.creativenav_SF a:hover::after,
.creativenav_SF a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

We have mentioned just first demo but there are two more which you can find in the demo file. We hope this collection gives you some more inspiration for creating the menu bar.

If you like it, Please share it with your friends so they may also add it to their next upcoming projects.

Code ExamplesYou May Also Like