Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №46 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo"> <a href="#" class="link"><span>hover me</span></a> </div>
.link{ font-family: 'Zilla Slab', serif; display: inline-block; overflow: hidden; position: relative; z-index: 1; } .link span{ color:#000; font-size: 28px; font-weight: 400; text-transform: uppercase; padding: 5px 15px; display: block; transition: all 0.3s ease-in-out; } .link:hover span{ color: #fff; text-shadow: 0 0 5px #000; } .link:before, .link:after{ content: ''; background-color: #2e86de; width: 20px; height: 20px; border-radius: 50%; transform: translateY(-50%); position: absolute; top: 50%; left: -20px; z-index: -1; transition: left 0.2s, transform 0.3s ease 0.2s; } .link:after{ left: 100%; } .link:hover:before, .link:hover:after{ transform: translateX(-50%) translateY(-50%) scale(10); left: 50%; top: 50%; } @media only screen and (max-width: 990px){ .link span{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 20px; } }