Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №36 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<a href="#" class="link"> <span>H</span><span>O</span><span>V</span><span>E</span><span>R</span> <span>M</span><span>E</span> </a>
.demo{ background-color: #129fc1;} .link{ display: inline-block; position: relative; z-index: 1; } .link span{ color: rgba(255,255,255,0.5); font-size: 25px; font-weight: 600; text-transform: uppercase; text-align: center; padding: 5px 0 0; display: inline-block; transition: all 0.3s ease 0s; } .link:hover span{ color: #fff; transform: rotateY(360deg); } .link:before{ content: ''; height: 2px; width: 0; background-color: #fff; position: absolute; left:0; top: 0; transition:all 0.3s ease 0s; } .link:hover:before{ width: 100%; } @media only screen and (max-width: 990px){ .link span{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 20px; } }