Подробное описание и демонстрация работы эффекта наведения для ссылки под номером №24 для библиотеки Bootstrap. Html и CSS код для оформления ссылок на сайте как на изображении.
HTML разметка и CSS стили для оформления ссылок на сайте<a href="#" class="link">hover me</a>
.demo{ background: #9f2369; } .link{ display: inline-block; padding: 3px 10px; font-size: 25px; font-weight: 600; color: #fff; text-transform: uppercase; border: 1px solid #fff; position: relative; transition: all 0.3s ease 0s; } .link:hover{ color: #fff; } .link:before, .link:after{ content: ""; width: 18px; height: 18px; border-width: 1px 0 0 1px; border-style: solid; border-color: #fff; position: absolute; top: -6px; left: -6px; transition: all 0.3s ease 0s; } .link:after{ top: auto; bottom: -6px; left: auto; right: -6px; border-width: 0 1px 1px 0; } .link:hover:before, .link:hover:after{ width: calc(100% + 12px); height: calc(100% + 12px); transform: rotateY(180deg); } @media only screen and (max-width: 767px){ .link{ margin-bottom: 20px; } }