Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №48 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<div class="demo"> <a href="#" class="link"> <span>hover me</span> </a> </div>
.link{ font-family: 'Amaranth', sans-serif; display: inline-block; position: relative; z-index: 1; } .link:before, .link:after{ content: ''; height: 190%; width: 125%; border: 2px solid #3498db; opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0.85); position: absolute; left: 50%; top: 50%; z-index: -1; transition: all 0.3s; } .link:after{ background: linear-gradient(135deg, #1caedb,#3498db,#1caedb,#3498db,#1caedb,#3498db); filter: blur(10px); transform: translateX(-50%) translateY(-50%) scale(0.5); -webkit-clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); transition-delay: 0.2; } .link:hover:before, .link:hover:after{ filter: blur(0); opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } .link span{ color: #3498db; font-size: 30px; font-weight: 400; font-style: italic; line-height: 25px; text-transform: capitalize; display: block; transition: all 0.3s ease-in-out; } .link:hover span{ color: #fff; } @media only screen and (max-width: 990px){ .link span{ font-size: 20px; } } @media only screen and (max-width: 767px){ .link{ margin: 0 0 30px; } }