Это подчеркивание текста, который находится по ссылкой. От стандартного вида он кардинально отличается, так как при наведение создается кнопка, а точнее начинает создаваться подчеркивание по всем сторонам, что после этого остается кнопка, где по центру выставлено то ключевое слово, но без всякого фона.
Где безусловно можно поставить под эффект кнопки, что аналогично можно применять по дизайну. По цветовой гамме все ставится в стилистике CSS, что по умолчанию идет в синем оттенке. Так, что можно оформить под любой стиль интернет сайта.
Так выглядит в рабочем состояние, где ниже будет ссылка на demo страницу, что можно в реале посмотреть.
Приступаем к установке:
HTML
Код
<div class="setukolas">
<div class="katemun"></div>
<div class="kidemakov"></div>
Записки веб-разработчика
</div>
CSS
Код
div.setukolas {
display: inline-block;
padding: 17px 20px;
color: #52b1e2;
font-weight: bold;
cursor: pointer;
position: relative;
}
div.katemun,
div.kidemakov {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div.katemun::after,
div.katemun::before,
div.kidemakov::after,
div.kidemakov::before {
content: "";
display: block;
transition: all 0.3s;
background: #288EC3;
position: absolute;
}
div.katemun::after,
div.katemun::before {
width: 0;
height: 1px;
transition-delay: 0.3s;
}
div.katemun::after,
div.kidemakov::after {
top: 0;
left: 0;
}
div.katemun::before,
div.kidemakov::before {
bottom: 0;
right: 0;
}
div.setukolas:hover div.katemun::after,
div.setukolas:hover div.katemun::before {
width: 100%;
transition-delay: 0s;
}
div.kidemakov::after,
div.kidemakov::before {
width: 1px;
height: 0;
transition-delay: 0s;
}
div.setukolas:hover div.kidemakov::after,
div.setukolas:hover div.kidemakov::before {
height: 100%;
transition-delay: 0.3s;
}
Демонстрация
