Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №57 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo"> <a href="#" class="link"> <span data-hover="Hover Me">Hover Me</span> </a> </div>
.link{ font-family: 'Titillium Web', sans-serif; display: inline-block; } .link span{ color: #192a56; font-size: 28px; font-weight: 600; line-height: 25px; text-transform: capitalize; display: block; perspective: 500px; position: relative; z-index: 1; transition: all 0.5s; } .link:hover span{ color: transparent; perspective: 3000px; transform: rotateY(90deg); transform-origin: right center; transform-style: preserve-3d; } .link span:before{ content: attr(data-hover); color: transparent; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; transform: rotateY(-90deg); transform-origin: 100% 0; transform-style: preserve-3d; transition: all 0.5s ease 0s; } .link:hover span:before{ color: #e84118; } @media only screen and (max-width: 990px){ .link{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin: 0 0 30px; } }