Author: | joelcolucci |
---|---|
Views Total: | 1,565 views |
Official Page: | Go to website |
Last Update: | May 2, 2015 |
License: | MIT |
Preview:

Description:
A minimal CSS framework that utilizes CSS3 transitions to create expanding link underlines on mouse hover.
How to use it:
Create a list of links as follow.
<ul class="ex-bar-nav"> <li class="ex-bar-item"> <div class="ex-bar-content">LinkedIn</div> <a href="#" target="_blank" class="ex-bar-link"> <span class="ex-bar-bar"></span> </a> </li> <li class="ex-bar-item"> <div class="ex-bar-content">GitHub</div> <a href="#" target="_blank" class="ex-bar-link"> <span class="ex-bar-bar"></span> </a> </li> <li class="ex-bar-item"> <div class="ex-bar-content">Twitter</div> <a href="#" target="_blank" class="ex-bar-link"> <span class="ex-bar-bar"></span> </a> </li> </ul>
Create the expanding underlines that appear on hover.
* { box-sizing: border-box; } .ex-bar-nav { list-style: none; padding: 0; } .ex-bar-item { position: relative; display: inline-block; height: 45px; margin-right: 15px; } .ex-bar-content { padding: 10px 5px 0; } .ex-bar-link { position: absolute; top: 0; width: 100%; display: block; padding: 40px 50% 0; transition: .5s ease; } .ex-bar-link:hover { padding: 40px 0 0; } .ex-bar-bar { display: block; height: 5px; background: #00B6EA; border-radius: 3px; }