Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №27 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<a href="#" class="link">hover me</a>
.demo{ background: #2b748c; }
.link{
display: inline-block;
font-size: 22px;
color: #fff;
text-transform: uppercase;
position: relative;
transition: all 0.3s ease 0s;
}
.link:hover{ color: #fff; }
.link:before{
content: "";
width: 100%;
height: 2px;
background: #fff;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: -10px;
opacity: 0;
transform: translate3d(50%, 0, 0);
}
.link:hover:before{
animation: link_hover .3s linear forwards;
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes link_hover{
0%{
opacity: 1;
transform: translate3d(-50%, -3px, 0);
}
55%{
transform: translate3d(50%, -3px, 0);
}
56%{
transform: translate3d(50%, calc(0.5rem + 4px), 0);
}
100%{
opacity: 1;
transform: translate3d(0, calc(0.5rem + 4px), 0);
}
}
@media only screen and (max-width: 767px){
.link{ margin-bottom: 20px; }
}