Puro CSS expandiendo el enlace subraya
| Autor: | joelcolucci |
|---|---|
| Views Total: | 2,548 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 2, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un marco de CSS mínimo que utiliza transiciones CSS3 para crear subrayados de vínculo expansivo en el mouse Hover.
Funcionamiento
Cree una lista de enlaces como sigue.
<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>
Cree los subrayados en expansión que aparecen al desplazar el mouse.
* { 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;
}
