Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №51 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo">
<a href="#" class="link">Hover Me</a>
</div>
.link{
color: #3867d6;
font-family: 'Exo 2', sans-serif;
font-size: 25px;
font-weight: 600;
text-transform: uppercase;
padding: 0 20px;
display: inline-block;
position: relative;
z-index: 1;
}
.link:hover{
color: #fff;
text-shadow: 0 0 3px #000;
}
.link:before{
content: '';
background-color: #3867d6;
height: 100%;
width: 100%;
transform: scaleX(0);
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.3s cubic-bezier(1, 0.01, 0.06, 1);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.link:hover:before{
transform: scaleX(1);
animation: animate 0.3s linear;
}
@keyframes animate{
0%{ transform: scaleX(0); }
30%{ transform: scaleX(1); }
60%{ transform: scaleX(0.7); }
90%{ transform: scaleX(0.9); }
100%{ transform: scaleX(1); }
}
@media only screen and (max-width: 990px){
.link{ font-size: 20px; }
}
@media only screen and (max-width: 767px){
.link{ margin: 0 0 30px; }
}