New CSS3 Hover Link Effects

One of the essential parts of a website is a text link. By clicking an anchor tag you can go anywhere from the site as it points to a specific page.
Typical links contain simple hover effects such as use of a simple color change when the mouse is pointed or clicked. But there are ways to make this effect even better.
Today, we'll going to show you how to create awesome links using new features of CSS3: transition and transform. At the end of this tutorial you’ll have cool link hover effect that will surely rock your navigation.
The first demo will have a simple effect so that when you hover your mouse, a three-pixel border will come out from the back of the box container of the link text.
The HTML
Our markup will simply contain an HTML5 nav tag which holds all of the links on our demo. On each anchor tag there is class box and demo-1. We will also place font-awesome icons before the link to make a cool design.
<nav> <a href="demo1.html" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a> <a href="demo2.html" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a> <a href="demo3.html" class="box demo-1"> <i class="fa fa-hand-o-left"></i> </i> <span>Demo 3</span></a> <a href="demo4.html" class="box demo-1"> <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a> </nav>
The CSS
For our CSS, we will use the ::before and ::after selector to insert a 3 pixel border when the mouse was hovered to the anchor tag element. To make the effect smooth, we will use CSS3 transition.
.box{ color: #fff; padding: 10px; } .box:hover{ background: #fff; color: #26425E; } .demo-1 { position: relative; } .demo-1:before { content: ''; position: absolute; bottom: 0; left: 0; top: 0; right: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.2s; -webkit-transition-property: top, left, right, bottom; -moz-transition-property: top, left, right, bottom; -ms-transition-property: top, left, right, bottom; -o-transition-property: top, left, right, bottom; transition-property: top, left, right, bottom; } .demo-1:hover:before, .demo-1:focus:before{ -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -ms-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; border: #fff solid 3px; bottom: -7px; left: -7px; top: -7px; right: -7px; }
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu