Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №37 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo"> <a href="#" class="link" data-hover="hover me"><span>hover me</span></a> </div>
.demo{ background-color: #ed3664;} .link{ display: inline-block; overflow: hidden; position: relative; z-index: 1; } .link span{ color: transparent; font-size: 25px; font-weight: 600; text-transform: uppercase; text-align: center; padding: 5px 10px; display: block; transition: all 0.3s ease 0s; } .link:hover span{ color: transparent; } .link:before, .link:after{ content: attr(data-hover); color: #fff; font-size: 25px; text-transform: uppercase; font-weight: 600; padding: 5px 10px; transform: rotateY(0); transform-origin: 50% 0; position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.35s linear; } .link:hover:before{ transform: rotateY(90deg); } .link:after{ background-color: #b71540; white-space: nowrap; left: 100%; } .link:hover:after{ left: 0; } @media only screen and (max-width: 990px){ .link span{ font-size: 20px; } .link:before, .link:after{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 20px; } }