Применение эффекта CSS прилетающей тени ссылок
Чтобы применить эффект, для начала Вам потребуется добавить стили CSS эффекта в любое удобное место.
a.hover-link-effect {
font-size: inherit;
}
a.hover-link-effect::before {
color: #444;
content: attr(data-hover-link);
position: absolute;
opacity: 0;
text-shadow: 1px 1px 0px rgb(223, 223, 223),2px 2px 0px rgb(185, 185, 185);
-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
pointer-events: none;
}
a.hover-link-effect:hover::before,
a.hover-link-effect:focus::before {
-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
opacity: 1;
}
Самим ссылкам потребуется добавить 2 атрибута, class="hover-link-effect" и data-hover-link="ТЕКСТ ССЫЛКИ".
Текст в атрибуте data-hover-link="ТЕКСТ ССЫЛКИ" должен быть аналогичным тексту в самой ссылке.
<a href="#" class="hover-link-effect" data-hover-link="ТЕКСТ ССЫЛКИ">ТЕКСТ ССЫЛКИ</a>
Демо пример работы эффекта, при желании Вы можете внести свои корректировки в предлагаемый код и сразу посмотреть результат изменений.
► Нажмите на значёк 
в редакторе для показа результата.