Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №55 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo">
<a href="#" class="link">
<span>Hover Me</span>
</a>
</div>
.link{
font-family: 'Muli', sans-serif;
display: inline-block;
overflow: hidden;
}
.link span{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #333;
position: relative;
display: block;
padding: 0;
transition: all 0.3s ease 0.3s;
}
.link:hover span{ color: #E91E63; }
.link span:before{
content: '';
background: #E91E63;
height: 100%;
width: 0;
opacity: 0.5;
position: absolute;
left: -3px;
top: 0;
}
.link:hover span:before{
width: 2px;
animation: cylon 1s;
}
@keyframes cylon{
0%{
left: -5px;
width: 0;
}
10%{
left: 0;
width: 2px;
}
25%{ width: 20px; }
50%{
left: 100%;
width: 2px;
}
75%{ width: 20px; }
100%{
left: -5px;
width: 0;
}
}
@media only screen and (max-width: 990px){
.link{ font-size: 20px; }
}
@media only screen and (max-width: 767px){
.link{ margin: 0 0 30px; }
}